<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="content-type" content="text/html;charset=UTF-8">
		<link rel="canonical" href="http://js.cytoscape.org" />
		<meta name="description" content="Graph theory / network library for analysis and visualisation - compatible with CommonJS/Node.js/Browserify/Webpack, AMD/Require.js, npm, Bower, jspm, Meteor/Atmosphere, jQuery, and plain JS/JavaScript">
		<meta name="author" content="Max Franz">
		<meta name="robots" content="all" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimal-ui">

		<link rel="shortcut icon" href="img/cytoscape-logo.png" />
		<link rel="shortcut icon" href="img/cytoscape-logo.svg" type="image/svg" />

		<title>Cytoscape.js</title>

		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/highlight/github.css">
		<link rel="stylesheet" href="css/style.css">

	</head>

	<body>

		<div id="content">

			<a id="open-navigation" class="activatable plain-link"><span class="fa fa-bars"></span></a>
			<div id="open-navigation-bg"></div>

			<h1 id="top" class="title"><span class="title-logo"></span>Cytoscape.js</h1>

			<div class="subtitle">
				Graph theory (network) library for visualisation and analysis
			</div>

			<div id="documentation">
				

					<div class="links">

<p><a href="https://github.com/cytoscape/cytoscape.js"><img src="https://img.shields.io/badge/Repo-GitHub-yellow.svg" alt="GitHub repo"></a>
<a href="https://twitter.com/cytoscapejs"><img src="https://img.shields.io/badge/Updates-Twitter-yellow.svg" alt="Twitter updates"></a>
<a href="https://blog.js.cytoscape.org"><img src="https://img.shields.io/badge/News%20and%20tutorials-Blog-yellow.svg" alt="News and tutorials"></a>
<a href="https://stackoverflow.com/questions/tagged/cytoscape.js"><img src="https://img.shields.io/badge/Questions-StackOverflow-yellow.svg" alt="Questions at StackOverflow"></a>
<a href="https://stackoverflow.com/questions/ask?tags=cytoscape.js,javascript"><img src="https://img.shields.io/badge/Ask%20a%20question-StackOverflow-yellow.svg" alt="Ask a question at StackOverflow"></a>
<a href="https://raw.githubusercontent.com/cytoscape/cytoscape.js/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="GitHub license"></a>
<a href="https://zenodo.org/badge/latestdoi/2255947"><img src="https://zenodo.org/badge/2255947.svg" alt="DOI"></a>
<a href="#introduction/citation"><img src="https://img.shields.io/badge/Cite-Oxford%20Bioinformatics%20Article-blue.svg" alt="Cite"></a>
<a href="https://www.npmjs.com/package/cytoscape"><img src="https://img.shields.io/npm/v/cytoscape.svg" alt="npm"></a>
<a href="https://github.com/cytoscape/cytoscape.js/tree/master/dist"><img src="https://img.shields.io/npm/v/cytoscape.svg?label=Download" alt="Download"></a>
<a href="#extensions"><img src="https://img.shields.io/badge/Extensions-52-blue.svg" alt="Extensions"></a>
<a href="https://www.npmjs.com/package/cytoscape"><img src="https://img.shields.io/npm/dm/cytoscape.svg?label=npm%20installs" alt="npm installs"></a>
<a href="https://travis-ci.org/cytoscape/cytoscape.js"><img src="https://img.shields.io/travis/cytoscape/cytoscape.js/master.svg?label=master%20branch" alt="master branch tests"></a>
<a href="https://travis-ci.org/cytoscape/cytoscape.js"><img src="https://img.shields.io/travis/cytoscape/cytoscape.js/unstable.svg?label=unstable%20branch" alt="unstable branch tests"></a>
<a href="https://greenkeeper.io/"><img src="https://badges.greenkeeper.io/cytoscape/cytoscape.js.svg" alt="Greenkeeper badge"></a></p>
</div>



				<h1 id="demos">Demos <a href="#demos"><span class="fa fa-bookmark"></span></a></h1>



					<div class="gallery-demos">
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/colajs-graph">
								<span class="gallery-preview" style="background-image: url('img/demos/colajs-graph.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/colajs-graph">
									<span class="gallery-name"><span class="fa fa-github"></span> Cola.js gene-gene graph</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/tokyo-railways">
								<span class="gallery-preview" style="background-image: url('img/demos/tokyo-railways.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/tokyo-railways">
									<span class="gallery-name"><span class="fa fa-github"></span> Tokyo railways</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="http://wineandcheesemap.com">
								<span class="gallery-preview" style="background-image: url('img/demos/wine-cheese-map.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/wineandcheesemap">
									<span class="gallery-name"><span class="fa fa-github"></span> Wine &amp; cheese</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://PathwayCommons.github.io/cytoscape-sbgn-stylesheet">
								<span class="gallery-preview" style="background-image: url('img/demos/sbgn-stylesheet.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/PathwayCommons/cytoscape-sbgn-stylesheet">
									<span class="gallery-name"><span class="fa fa-github"></span> SBGN stylesheet</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.github.io/cytoscape.js-popper">
								<span class="gallery-preview" style="background-image: url('img/demos/popper.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-popper">
									<span class="gallery-name"><span class="fa fa-github"></span> Popper.js extension</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.github.io/cytoscape.js-popper/demo-tippy.html">
								<span class="gallery-preview" style="background-image: url('img/demos/popper-tippy.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-popper">
									<span class="gallery-name"><span class="fa fa-github"></span> Popper.js extension &amp; Tippy.js tooltips</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.github.io/cytoscape.js-automove">
								<span class="gallery-preview" style="background-image: url('img/demos/automove.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-automove">
									<span class="gallery-name"><span class="fa fa-github"></span> Automove extension</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.github.io/cytoscape.js-cxtmenu">
								<span class="gallery-preview" style="background-image: url('img/demos/cxtmenu.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-cxtmenu">
									<span class="gallery-name"><span class="fa fa-github"></span> Cxtmenu extension</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.org/cytoscape.js-edgehandles/demo-snap.html">
								<span class="gallery-preview" style="background-image: url('img/demos/edgehandles.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-edgehandles">
									<span class="gallery-name"><span class="fa fa-github"></span> Edgehandles extension</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.github.io/cytoscape.js-compound-drag-and-drop">
								<span class="gallery-preview" style="background-image: url('img/demos/compound-drag-and-drop.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-compound-drag-and-drop">
									<span class="gallery-name"><span class="fa fa-github"></span> Compound drag-and-drop extension</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/circle-layout">
								<span class="gallery-preview" style="background-image: url('img/demos/circle-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/circle-layout">
									<span class="gallery-name"><span class="fa fa-github"></span> Circle layout</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/concentric-layout">
								<span class="gallery-preview" style="background-image: url('img/demos/concentric-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/concentric-layout">
									<span class="gallery-name"><span class="fa fa-github"></span> Concentric layout</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://ivis-at-bilkent.github.io/cytoscape.js-avsdf/demo.html">
								<span class="gallery-preview" style="background-image: url('img/demos/avsdf-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/iVis-at-Bilkent/cytoscape.js-avsdf">
									<span class="gallery-name"><span class="fa fa-github"></span> AVSDF layout</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://ivis-at-bilkent.github.io/cytoscape.js-cise/demo.html">
								<span class="gallery-preview" style="background-image: url('img/demos/cise-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/iVis-at-Bilkent/cytoscape.js-cise">
									<span class="gallery-name"><span class="fa fa-github"></span> CiSE layout</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/grid-layout">
								<span class="gallery-preview" style="background-image: url('img/demos/grid-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/grid-layout">
									<span class="gallery-name"><span class="fa fa-github"></span> Grid layout</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/cose-layout">
								<span class="gallery-preview" style="background-image: url('img/demos/cose-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/cose-layout">
									<span class="gallery-name"><span class="fa fa-github"></span> CoSE layout</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.github.io/cytoscape.js-cose-bilkent">
								<span class="gallery-preview" style="background-image: url('img/demos/cose-bilkent-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-cose-bilkent">
									<span class="gallery-name"><span class="fa fa-github"></span> CoSE Bilkent layout</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.github.io/cytoscape.js-cose-bilkent/demo-compound.html">
								<span class="gallery-preview" style="background-image: url('img/demos/cose-bilkent-layout-compound.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-cose-bilkent">
									<span class="gallery-name"><span class="fa fa-github"></span> CoSE Bilkent layout (compound)</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://ivis-at-bilkent.github.io/cytoscape.js-fcose/demo.html">
								<span class="gallery-preview" style="background-image: url('img/demos/fcose-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/iVis-at-Bilkent/cytoscape.js-fcose">
									<span class="gallery-name"><span class="fa fa-github"></span> fCoSE layout</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://ivis-at-bilkent.github.io/cytoscape.js-fcose/demo-compound.html">
								<span class="gallery-preview" style="background-image: url('img/demos/fcose-layout-compound.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/iVis-at-Bilkent/cytoscape.js-fcose">
									<span class="gallery-name"><span class="fa fa-github"></span> fCoSE layout (compound)</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.github.io/cytoscape.js-cola">
								<span class="gallery-preview" style="background-image: url('img/demos/cola-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-cola">
									<span class="gallery-name"><span class="fa fa-github"></span> Cola layout</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.github.io/cytoscape.js-cola/demo-compound.html">
								<span class="gallery-preview" style="background-image: url('img/demos/cola-layout-compound.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-cola">
									<span class="gallery-name"><span class="fa fa-github"></span> Cola layout (compound)</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.github.io/cytoscape.js-euler">
								<span class="gallery-preview" style="background-image: url('img/demos/euler-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-euler">
									<span class="gallery-name"><span class="fa fa-github"></span> Euler layout</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.github.io/cytoscape.js-spread">
								<span class="gallery-preview" style="background-image: url('img/demos/spread-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-spread">
									<span class="gallery-name"><span class="fa fa-github"></span> Spread layout</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.github.io/cytoscape.js-dagre">
								<span class="gallery-preview" style="background-image: url('img/demos/dagre-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-dagre">
									<span class="gallery-name"><span class="fa fa-github"></span> Dagre layout</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="https://cytoscape.github.io/cytoscape.js-klay">
								<span class="gallery-preview" style="background-image: url('img/demos/klay-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js-klay">
									<span class="gallery-name"><span class="fa fa-github"></span> Klay layout</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/images-breadthfirst-layout">
								<span class="gallery-preview" style="background-image: url('img/demos/images-breadthfirst-layout.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/images-breadthfirst-layout">
									<span class="gallery-name"><span class="fa fa-github"></span> Breadthfirst layout &amp; images</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/animated-bfs">
								<span class="gallery-preview" style="background-image: url('img/demos/animated-bfs.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/animated-bfs">
									<span class="gallery-name"><span class="fa fa-github"></span> Animated BFS</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/node-types">
								<span class="gallery-preview" style="background-image: url('img/demos/node-types.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/node-types">
									<span class="gallery-name"><span class="fa fa-github"></span> Node types</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/edge-types">
								<span class="gallery-preview" style="background-image: url('img/demos/edge-types.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/edge-types">
									<span class="gallery-name"><span class="fa fa-github"></span> Edge types</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/edge-arrows">
								<span class="gallery-preview" style="background-image: url('img/demos/edge-arrows.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/edge-arrows">
									<span class="gallery-name"><span class="fa fa-github"></span> Edge arrow types</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/labels">
								<span class="gallery-preview" style="background-image: url('img/demos/labels.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/labels">
									<span class="gallery-name"><span class="fa fa-github"></span> Labels</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/compound-nodes">
								<span class="gallery-preview" style="background-image: url('img/demos/compound-nodes.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/compound-nodes">
									<span class="gallery-name"><span class="fa fa-github"></span> Compound nodes</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/linkout-example">
								<span class="gallery-preview" style="background-image: url('img/demos/linkout-example.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/linkout-example">
									<span class="gallery-name"><span class="fa fa-github"></span> Linkout example</span>
								</a>
							</div>

						</div>
						<div class="gallery-demo">

							<a class="gallery-link" href="demos/pie-style">
								<span class="gallery-preview" style="background-image: url('img/demos/pie-style.png');"></span>
							</a>

							<div class="gallery-title">
								<a href="https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/pie-style">
									<span class="gallery-name"><span class="fa fa-github"></span> Pie style</span>
								</a>
							</div>

						</div>
					</div>


				<h1 id="introduction">Introduction <a href="#introduction"><span class="fa fa-bookmark"></span></a></h1>

					<h2 id="introduction/factsheet">Factsheet <a href="#introduction/factsheet"><span class="fa fa-bookmark"></span></a></h2>
<ul>
<li>A fully featured graph library written in pure JS</li>
<li>Permissive open source license (MIT) for the core Cytoscape.js library and all first-party extensions</li>
<li>Used in commercial projects and open-source projects in production</li>
<li>Designed for users first, for both frontfacing app usecases <em>and</em> developer usecases</li>
<li>Highly optimised</li>
<li>Compatible with<ul>
<li>All modern browsers</li>
<li>Legacy browsers with ES5 and canvas support<ul>
<li>ES5 and canvas support are required, and feature detection is used for optional performance enhancements.</li>
<li>Browsers circa 2012 support ES5 fully: IE10, Chrome 23, Firefox 21, Safari 6 (<a href="https://caniuse.com/#feat=es5">caniuse</a>)</li>
<li>Browsers with partial but sufficient ES5 support also work, such as IE9 and Firefox 4.</li>
<li>The documentation and examples are not optimised for old browsers, although the library itself is.  Some demos may not work in old browsers in order to keep the demo code simple.</li>
</ul>
</li>
<li>Module systems<ul>
<li>ES modules</li>
<li>UMD<ul>
<li>CommonJS/Node.js</li>
<li>Globals</li>
<li>AMD/Require.js</li>
</ul>
</li>
</ul>
</li>
<li>Package managers<ul>
<li>npm</li>
<li>yarn</li>
<li>bower</li>
</ul>
</li>
<li>Supports the <a href="https://www.r-project.org/">R language</a> via <a href="http://www.bioconductor.org/packages/release/bioc/html/RCyjs.html">RCyjs</a></li>
</ul>
</li>
<li>Supports rendering images of graphs on Node.js with <a href="https://github.com/cytoscape/cytosnap">Cytosnap</a></li>
<li>Has a large suite of tests that can be run in the browser or the terminal</li>
<li>Documentation includes live code examples, doubling as an interactive requirements specification; example graphs may also be freely modified in your browser’s JS console</li>
<li>Fully serialisable and deserialisable via JSON</li>
<li>Uses layouts for automatically or manually positioning nodes</li>
<li>Supports selectors for terse filtering and graph querying</li>
<li>Uses stylesheets to separate presentation from data in a rendering agnostic manner</li>
<li>Abstracted and unified touch events on top of a familiar event model</li>
<li>Builtin support for standard gestures on both desktop and touch</li>
<li>Chainable for convenience</li>
<li>Supports functional programming patterns</li>
<li>Supports set theory operations</li>
<li>Includes graph theory algorithms, from BFS to PageRank</li>
<li>Animatable graph elements and viewport</li>
<li>Fully extendable (and extensions can be autoscaffolded for you)</li>
<li>Well maintained<ul>
<li>Weekly patch release cadence</li>
<li>Monthly feature release cadence</li>
</ul>
</li>
<li>Listed by <a href="https://doi.org/10.5281/zenodo.831800">Zenodo</a> for per-version DOIs</li>
<li>Listed by <a href="https://omictools.com/cytoscape-js-tool">OMIC Tools</a></li>
<li>Used by<ul>
<li><a href="http://www.activevalue.eu/">Active Value Advisors</a> : <a href="http://www.how-4.com/">How-4</a></li>
<li><a href="http://apid.dep.usal.es/">Agile Protein Interactomes DataServer</a></li>
<li><a href="https://alman.ax/#/about">Almanax</a></li>
<li><a href="http://www.aras.com/">Aras</a></li>
<li><a href="http://bgu.ac.il/">Ben-Gurion University of the Negev</a></li>
<li><a href="http://netbio.bgu.ac.il/diffnet/">DiffNet</a></li>
<li><a href="http://netbio.bgu.ac.il/tissuenet">TissueNet</a></li>
<li><a href="http://thebiogrid.org/">BioGRID</a></li>
<li><a href="https://bluesailcrm.com/">BlueSail CRM</a></li>
<li><a href="https://www.classcraft.com/">Classcraft</a></li>
<li><a href="http://www.cray.com">Cray Inc.</a></li>
<li><a href="https://cybersift.io">CyberSift</a></li>
<li><a href="http://cynetshare.ucsd.edu/">CyNetShare</a></li>
<li><a href="http://www.darpa.mil">DARPA</a></li>
<li><a href="https://duo.com/labs">Duo Labs</a> : <a href="https://github.com/duo-labs/cloudmapper">CloudMapper</a></li>
<li><a href="http://dsysmap.irbbarcelona.org">dSysMap</a></li>
<li><a href="https://www.elsevier.com">Elsevier</a></li>
<li><a href="https://products.office.com/en-us/excel">Excel</a> : <a href="https://gigraph.io">GIGRAPH</a></li>
<li><a href="https://www.facebook.com">Facebook</a> : <a href="https://facebook.github.io/metro/">Metro</a> visualiser</li>
<li><a href="https://www.fediverse.space/">Fediverse</a></li>
<li><a href="http://www.ganister.eu/">Ganister</a></li>
<li><a href="https://cytoscape-demo.netlify.com/">GLB301 Simulation</a></li>
<li><a href="https://google.com">Google</a> : <a href="https://www.tensorflow.org">TensorFlow</a> : SyntaxNet : DRAGNN visualiser</li>
<li><a href="https://www.gchq.gov.uk/">GCHQ</a> : <a href="https://gchq.github.io/gaffer-doc/">Gaffer</a></li>
<li><a href="http://genemania.org">GeneMANIA</a></li>
<li><a href="http://graphlytic.sk/">Graphlytic</a></li>
<li><a href="https://hackertarget.com/">Hacker Target</a> : <a href="https://hackertarget.com/domain-profiler/">Domain Profiler</a></li>
<li><a href="https://www.harvard.edu">Harvard University</a> : <a href="http://bioplex.hms.harvard.edu/bioplexDisplay">BioPlex</a></li>
<li><a href="https://haystack.mobi/panopticon/">ICSI Haystack Project</a></li>
<li><a href="http://www.infotrack.com.au/">InfoTrack</a></li>
<li><a href="http://intercax.com/">Intercax</a></li>
<li><a href="https://www.kiali.io/">Kiali</a></li>
<li><a href="http://lore.chuci.info">Lore</a></li>
<li><a href="http://thekanjimap.com/">The Kanji Map</a></li>
<li><a href="https://www.machine2learn.com">Machine2Learn</a> : <a href="https://www.machine2learn.com/deep-learning-model-generator/">Deep Learning Model Generator</a></li>
<li><a href="https://www.mpimp-golm.mpg.de">Max Plank Institute of Molecular Cell Physiology</a> : <a href="http://conekt.mpimp-golm.mpg.de/pub/">CoNekT</a></li>
<li><a href="http://en.musicalized.com/full">Musicalized</a></li>
<li><a href="https://www.naver.com/">Naver</a> : <a href="https://naver.github.io/pinpoint/">Pinpoint</a></li>
<li><a href="https://newrelic.com/platform">New Relic</a></li>
<li><a href="http://www.ndexbio.org/">NDEx</a></li>
<li><a href="https://www.nsa.gov/">NSA</a> : <a href="https://github.com/nsacyber/WALKOFF">WALKOFF</a></li>
<li><a href="http://www.ohdsi.org/">OHDSI</a></li>
<li><a href="https://www.panaya.com">Panaya</a> : <a href="https://www.panaya.com/product/salesforce-foresight/">Panaya ForeSight</a></li>
<li><a href="http://www.pathwaycommons.org">Pathway Commons</a></li>
<li><a href="https://github.com/idekerlab/py2cytoscape">py2cytoscape</a></li>
<li><a href="http://rezza.io">Rezza</a></li>
<li><a href="https://www.rifm.org">Research Institute for Fragrance Materials</a> : <a href="https://rifmdatabase.rifm.org/rifmweb/">RIFM Database</a></li>
<li><a href="http://www.tsl.ac.uk/">Sainsbury Laboratory</a> : <a href="http://pinet.tsl.ac.uk/">PINet</a></li>
<li>Southwest Harbor Public Library, Maine : <a href="http://swhplibrary.net/archive/">Digital Archive</a> : <a href="https://github.com/gsoules/AvantRelationships">AvantRelationships</a></li>
<li><a href="http://www.soteradefense.com/">Sotera Defense Solutions, Inc.</a> : <a href="http://sotera.github.io/graphene/">Graphene</a></li>
<li><a href="http://www.spininhetweb.nl/">Spin in het Web</a> : <a href="https://dynalearn.nl">DynaLearn</a></li>
<li><a href="https://www.sri.com">SRI International</a> : <a href="http://biocyc.org/">BioCyc</a> : <a href="https://biocyc.org/pathway-collage-info">Pathway Collages</a></li>
<li><a href="https://steemit.com/">Steemit</a></li>
<li><a href="https://www.stringify.com/">Stringify</a></li>
<li><a href="https://www.threatcrowd.org/">Threat Crowd</a></li>
<li><a href="https://trace.risingstack.com/">Trace</a></li>
<li><a href="https://www.unist.ac.kr/">UNIST</a> : <a href="https://sites.google.com/site/bigunist2/">Bioinformatics Group</a> : <a href="https://github.com/unistbig/GScluster">GScluster</a> &amp; <a href="https://github.com/unistbig/shinyCyJS">shinyCyJS</a></li>
<li><a href="https://www.ub.edu">University of Barcelona</a> : <a href="https://compgen.bio.ub.edu/PlanNET">PlanNET</a></li>
<li><a href="http://www.cam.ac.uk/">University of Cambridge</a> : <a href="http://intermine.org/">Intermine</a></li>
<li><a href="http://en.uestc.edu.cn/">University of Electronic Science and Technology of China</a> : <a href="http://cefg.uestc.edu.cn/Mslr/">Microbal Synthetic Lethal and Rescue Database</a></li>
<li><a href="https://www.uni-heidelberg.de">University of Heidelberg</a> : <a href="https://mampf.mathi.uni-heidelberg.de/">MaMpf</a></li>
<li><a href="http://www.imise.uni-leipzig.de/en">University of Leipzig, Institute for Medical Informatics, Statistics and Epidemiology (IMISE)</a> : <a href="http://www.snik.eu/">SNIK research project</a></li>
<li><a href="https://umd.edu/">University of Maryland</a> : <a href="http://cbcb.umd.edu/">Center for Bioinformatics and Computational Biology</a> : <a href="https://marbl.github.io/MetagenomeScope/">MetagenomeScope</a></li>
<li><a href="http://www.ucsd.edu/">University of Southern California, San Diego</a> : <a href="http://gnps.ucsd.edu/ProteoSAFe/result.jsp?view=network_displayer&amp;componentindex=67&amp;task=c95481f0c53d42e78a61bf899e9f9adb#%7B%7D">Visualization of structurally related compounds in Mass Spectrometry with Molecular Networks at GNPS</a></li>
<li><a href="https://www.vanderbilt.edu">Vanderbilt University</a> : <a href="https://github.com/LoLab-VU/pyvipr">PyViPR</a></li>
<li><a href="http://www.vt.edu/index.html">Virginia Tech</a> <a href="http://bioinformatics.cs.vt.edu/~murali/">T. M. Murali’s Research Group</a> : <a href="http://graphspace.org">GraphSpace</a></li>
<li><a href="http://www.mygaze.com/">Visual Interaction GmbH</a></li>
<li>xD Bio Inc. : <a href="https://truwl.com">Truwl</a></li>
<li>Do you use Cytoscape.js? <a href="https://github.com/cytoscape/cytoscape.js/issues/914">Let us know</a></li>
</ul>
</li>
</ul>
<h2 id="introduction/about">About <a href="#introduction/about"><span class="fa fa-bookmark"></span></a></h2>
<p>Cytoscape.js is an open-source <a href="http://en.wikipedia.org/wiki/Graph_theory">graph theory</a> (a.k.a. network) library written in JS.  You can use Cytoscape.js for graph analysis and visualisation.</p>
<p>Cytoscape.js allows you to easily display and manipulate rich, interactive graphs.  Because Cytoscape.js allows the user to interact with the graph and the library allows the client to hook into user events, Cytoscape.js is easily integrated into your app, especially since Cytoscape.js supports both desktop browsers, like Chrome, and mobile browsers, like on the iPad.  Cytoscape.js includes all the gestures you would expect out-of-the-box, including pinch-to-zoom, box selection, panning, et cetera.</p>
<p>Cytoscape.js also has graph analysis in mind:  The library contains many useful functions in graph theory.  You can use Cytoscape.js headlessly on Node.js to do graph analysis in the terminal or on a web server.</p>
<p>Cytoscape.js is an open-source project, and anyone is free to contribute.  For more information, refer to the <a href="https://github.com/cytoscape/cytoscape.js">GitHub README</a>.</p>
<p>The library was created at the <a href="http://thedonnellycentre.utoronto.ca">Donnelly Centre</a> at the <a href="http://www.utoronto.ca/">University of Toronto</a>.  It is the successor of <a href="http://cytoscapeweb.cytoscape.org/">Cytoscape Web</a>.</p>
<h2 id="introduction/packages">Packages <a href="#introduction/packages"><span class="fa fa-bookmark"></span></a></h2>
<ul>
<li>npm : <code>npm install cytoscape</code></li>
<li>bower : <code>bower install cytoscape</code></li>
<li>jspm : <code>jspm install npm:cytoscape</code></li>
</ul>
<h2 id="introduction/releases">Releases <a href="#introduction/releases"><span class="fa fa-bookmark"></span></a></h2>
<ul>
<li>3.14<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.14.0+is%3Aclosed">3.14.0</a></li>
</ul>
</li>
<li>3.13<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.13.1+is%3Aclosed">3.13.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.13.0+is%3Aclosed">3.13.0</a></li>
</ul>
</li>
<li>3.12<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.12.3+is%3Aclosed">3.12.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.12.2+is%3Aclosed">3.12.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.12.1+is%3Aclosed">3.12.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.12.0+is%3Aclosed">3.12.0</a></li>
</ul>
</li>
<li>3.11<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.11.2+is%3Aclosed">3.11.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.11.1+is%3Aclosed">3.11.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.11.0+is%3Aclosed">3.11.0</a></li>
</ul>
</li>
<li>3.10<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.10.2+is%3Aclosed">3.10.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.10.1+is%3Aclosed">3.10.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.10.0+is%3Aclosed">3.10.0</a></li>
</ul>
</li>
<li>3.9<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.9.4+is%3Aclosed">3.9.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.9.3+is%3Aclosed">3.9.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.9.2+is%3Aclosed">3.9.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.9.1+is%3Aclosed">3.9.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.9.0+is%3Aclosed">3.9.0</a></li>
</ul>
</li>
<li>3.8<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.8.5+is%3Aclosed">3.8.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.8.4+is%3Aclosed">3.8.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.8.3+is%3Aclosed">3.8.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.8.2+is%3Aclosed">3.8.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.8.1+is%3Aclosed">3.8.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.8.0+is%3Aclosed">3.8.0</a></li>
</ul>
</li>
<li>3.7<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.7.6+is%3Aclosed">3.7.6</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.7.5+is%3Aclosed">3.7.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.7.4+is%3Aclosed">3.7.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.7.3+is%3Aclosed">3.7.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.7.2+is%3Aclosed">3.7.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.7.1+is%3Aclosed">3.7.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.7.0+is%3Aclosed">3.7.0</a></li>
</ul>
</li>
<li>3.6<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.6.6+is%3Aclosed">3.6.6</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.6.5+is%3Aclosed">3.6.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.6.4+is%3Aclosed">3.6.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.6.3+is%3Aclosed">3.6.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.6.2+is%3Aclosed">3.6.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.6.1+is%3Aclosed">3.6.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.6.0+is%3Aclosed">3.6.0</a></li>
</ul>
</li>
<li>3.5<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.5.9+is%3Aclosed">3.5.9</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.5.8+is%3Aclosed">3.5.8</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.5.7+is%3Aclosed">3.5.7</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.5.6+is%3Aclosed">3.5.6</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.5.5+is%3Aclosed">3.5.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.5.4+is%3Aclosed">3.5.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.5.3+is%3Aclosed">3.5.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.5.2+is%3Aclosed">3.5.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.5.1+is%3Aclosed">3.5.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.5.0+is%3Aclosed">3.5.0</a></li>
</ul>
</li>
<li>3.4<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.4.9+is%3Aclosed">3.4.9</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.4.8+is%3Aclosed">3.4.8</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.4.7+is%3Aclosed">3.4.7</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.4.6+is%3Aclosed">3.4.6</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.4.5+is%3Aclosed">3.4.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.4.4+is%3Aclosed">3.4.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.4.3+is%3Aclosed">3.4.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.4.2+is%3Aclosed">3.4.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.4.1+is%3Aclosed">3.4.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.4.0+is%3Aclosed">3.4.0</a></li>
</ul>
</li>
<li>3.3<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.3.6+is%3Aclosed">3.3.6</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.3.5+is%3Aclosed">3.3.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.3.4+is%3Aclosed">3.3.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.3.3+is%3Aclosed">3.3.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.3.2+is%3Aclosed">3.3.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.3.1+is%3Aclosed">3.3.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.3.0+is%3Aclosed">3.3.0</a></li>
</ul>
</li>
<li>3.2<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.22+is%3Aclosed">3.2.22</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.21+is%3Aclosed">3.2.21</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.20+is%3Aclosed">3.2.20</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.19+is%3Aclosed">3.2.19</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.18+is%3Aclosed">3.2.18</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.17+is%3Aclosed">3.2.17</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.16+is%3Aclosed">3.2.16</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.15+is%3Aclosed">3.2.15</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.14+is%3Aclosed">3.2.14</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.13+is%3Aclosed">3.2.13</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.12+is%3Aclosed">3.2.12</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.11+is%3Aclosed">3.2.11</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.10+is%3Aclosed">3.2.10</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.9+is%3Aclosed">3.2.9</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.8+is%3Aclosed">3.2.8</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.7+is%3Aclosed">3.2.7</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.6+is%3Aclosed">3.2.6</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.5+is%3Aclosed">3.2.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.4+is%3Aclosed">3.2.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.3+is%3Aclosed">3.2.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.2+is%3Aclosed">3.2.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.1+is%3Aclosed">3.2.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.2.0+is%3Aclosed">3.2.0</a></li>
</ul>
</li>
<li>3.1<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.1.5+is%3Aclosed">3.1.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.1.4+is%3Aclosed">3.1.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.1.3+is%3Aclosed">3.1.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.1.2+is%3Aclosed">3.1.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.1.1+is%3Aclosed">3.1.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.1.0+is%3Aclosed">3.1.0</a></li>
</ul>
</li>
<li>3.0<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.0.1+is%3Aclosed">3.0.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A3.0.0+is%3Aclosed">3.0.0</a></li>
</ul>
</li>
<li>2.7<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.29+is%3Aclosed">2.7.29</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.28+is%3Aclosed">2.7.28</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.27+is%3Aclosed">2.7.27</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.26+is%3Aclosed">2.7.26</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.25+is%3Aclosed">2.7.25</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.24+is%3Aclosed">2.7.24</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.23+is%3Aclosed">2.7.23</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.22+is%3Aclosed">2.7.22</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.21+is%3Aclosed">2.7.21</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.20+is%3Aclosed">2.7.20</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.19+is%3Aclosed">2.7.19</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.18+is%3Aclosed">2.7.18</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.17+is%3Aclosed">2.7.17</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.16+is%3Aclosed">2.7.16</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.15+is%3Aclosed">2.7.15</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.14+is%3Aclosed">2.7.14</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.13+is%3Aclosed">2.7.13</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.12+is%3Aclosed">2.7.12</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.11+is%3Aclosed">2.7.11</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.10+is%3Aclosed">2.7.10</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.9+is%3Aclosed">2.7.9</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.8+is%3Aclosed">2.7.8</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.7+is%3Aclosed">2.7.7</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.6+is%3Aclosed">2.7.6</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.5+is%3Aclosed">2.7.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.4+is%3Aclosed">2.7.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.3+is%3Aclosed">2.7.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.2+is%3Aclosed">2.7.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.1+is%3Aclosed">2.7.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.7.0+is%3Aclosed">2.7.0</a></li>
</ul>
</li>
<li>2.6<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.6.12+is%3Aclosed">2.6.12</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.6.11+is%3Aclosed">2.6.11</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.6.10+is%3Aclosed">2.6.10</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.6.9+is%3Aclosed">2.6.9</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.6.8+is%3Aclosed">2.6.8</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.6.7+is%3Aclosed">2.6.7</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.6.6+is%3Aclosed">2.6.6</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.6.5+is%3Aclosed">2.6.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.6.4+is%3Aclosed">2.6.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.6.3+is%3Aclosed">2.6.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.6.2+is%3Aclosed">2.6.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.6.1+is%3Aclosed">2.6.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.6.0+is%3Aclosed">2.6.0</a></li>
</ul>
</li>
<li>2.5<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.5.5+is%3Aclosed">2.5.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.5.4+is%3Aclosed">2.5.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.5.3+is%3Aclosed">2.5.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.5.2+is%3Aclosed">2.5.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.5.1+is%3Aclosed">2.5.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.5.0+is%3Aclosed">2.5.0</a></li>
</ul>
</li>
<li>2.4<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.4.9+is%3Aclosed">2.4.9</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.4.8+is%3Aclosed">2.4.8</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.4.7+is%3Aclosed">2.4.7</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.4.6+is%3Aclosed">2.4.6</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.4.5+is%3Aclosed">2.4.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.4.4+is%3Aclosed">2.4.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.4.3+is%3Aclosed">2.4.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.4.2+is%3Aclosed">2.4.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.4.1+is%3Aclosed">2.4.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.4.0+is%3Aclosed">2.4.0</a></li>
</ul>
</li>
<li>2.3<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.16+is%3Aclosed">2.3.16</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.15+is%3Aclosed">2.3.15</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.14+is%3Aclosed">2.3.14</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.13+is%3Aclosed">2.3.13</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.11+is%3Aclosed">2.3.11</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.10+is%3Aclosed">2.3.10</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.9+is%3Aclosed">2.3.9</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.8+is%3Aclosed">2.3.8</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.7+is%3Aclosed">2.3.7</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.6+is%3Aclosed">2.3.6</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.5+is%3Aclosed">2.3.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.4+is%3Aclosed">2.3.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.3+is%3Aclosed">2.3.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.1+is%3Aclosed">2.3.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.3.0+is%3Aclosed">2.3.0</a></li>
</ul>
</li>
<li>2.2<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.14+is%3Aclosed">2.2.14</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.13+is%3Aclosed">2.2.13</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.12+is%3Aclosed">2.2.12</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.11+is%3Aclosed">2.2.11</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.10+is%3Aclosed">2.2.10</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.9+is%3Aclosed">2.2.9</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.8+is%3Aclosed">2.2.8</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.7+is%3Aclosed">2.2.7</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.6+is%3Aclosed">2.2.6</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.5+is%3Aclosed">2.2.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.4+is%3Aclosed">2.2.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.3+is%3Aclosed">2.2.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.2+is%3Aclosed">2.2.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.1+is%3Aclosed">2.2.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.2.0+is%3Aclosed">2.2.0</a></li>
</ul>
</li>
<li>2.1<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.1.1+is%3Aclosed">2.1.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.1.0+is%3Aclosed">2.1.0</a></li>
</ul>
</li>
<li>2.0<ul>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.0.5+is%3Aclosed">2.0.5</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.0.4+is%3Aclosed">2.0.4</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.0.3+is%3Aclosed">2.0.3</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.0.2+is%3Aclosed">2.0.2</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.0.1+is%3Aclosed">2.0.1</a></li>
<li><a href="https://github.com/cytoscape/cytoscape.js/issues?q=milestone%3A2.0.0+is%3Aclosed">2.0.0</a></li>
</ul>
</li>
</ul>
<h2 id="introduction/citation">Citation <a href="#introduction/citation"><span class="fa fa-bookmark"></span></a></h2>
<p>To cite Cytoscape.js in a paper, please cite the Oxford Bioinformatics issue:</p>
<p><em>Cytoscape.js: a graph theory library for visualisation and analysis</em></p>
<p>Franz M, Lopes CT, Huck G, Dong Y, Sumer O, Bader GD</p>
<p><a href="http://bioinformatics.oxfordjournals.org/content/32/2/309">Bioinformatics (2016) 32 (2): 309-311 first published online September 28, 2015 doi:10.1093/bioinformatics/btv557</a> (<a href="http://bioinformatics.oxfordjournals.org/content/32/2/309.full.pdf">PDF</a>)</p>
<p><a href="http://www.ncbi.nlm.nih.gov/pubmed/26415722">PubMed abstract</a></p>
<h2 id="introduction/funding">Funding <a href="#introduction/funding"><span class="fa fa-bookmark"></span></a></h2>
<p>Funding for Cytoscape.js and Cytoscape is provided by NRNB (U.S. National Institutes of Health, National Center for Research Resources grant numbers P41 RR031228 and GM103504) and by NIH grants 2R01GM070743 and 1U41HG006623. The following organizations help develop Cytoscape:</p>
<p><a href="http://www.systemsbiology.org">ISB</a> |
<a href="http://www.ucsd.edu">UCSD</a> |
<a href="http://cbio.mskcc.org">MSKCC</a> |
<a href="http://www.pasteur.fr">Pasteur</a> |
<a href="http://www.agilent.com/">Agilent</a> |
<a href="http://www.ucsf.edu/">UCSF</a> |
<a href="http://www.unilever.com">Unilever</a> |
<a href="http://www.utoronto.ca">Toronto</a> |
<a href="http://portal.ncibi.org/gateway/index.html">NCIBI</a> |
<a href="http://nrnb.org">NRNB</a></p>



				<h1 id="notation">Notation <a href="#notation"><span class="fa fa-bookmark"></span></a></h1>

					<h2 id="notation/graph-model">Graph model <a href="#notation/graph-model"><span class="fa fa-bookmark"></span></a></h2>
<p>Cytoscape.js supports many different graph theory usecases.  It supports directed graphs, undirected graphs, mixed graphs, loops, multigraphs, compound graphs (a type of hypergraph), and so on.</p>
<p>We are regularly making additions and enhancements to the library, and we gladly accept <a href="https://github.com/cytoscape/cytoscape.js/issues/new">feature requests</a> and <a href="https://github.com/cytoscape/cytoscape.js/blob/master/CONTRIBUTING.md">pull requests</a>.</p>
<h2 id="notation/architecture-amp-api">Architecture &amp; API <a href="#notation/architecture-amp-api"><span class="fa fa-bookmark"></span></a></h2>
<p>There are two components in the architecture that a programmer must be concerned with in order to use Cytoscape.js, the core (i.e. a graph instance) and the collection.  In Cytoscape.js, the core is a programmer’s main entry point into the library.  From the core, a programmer can run layouts, alter the viewport, and perform other operations on the graph as a whole.</p>
<p>The core provides several functions to access elements in the graph.  Each of these functions returns a collection, a set of elements in the graph.  Functions are available on collections that allow the programmer to filter the collection, perform operations on the collection, traverse the graph about the collection, get data about elements in the collection, and so on.</p>
<p><span class="important-indicator"></span> Note that a collection is immutable by default, meaning that the set of elements within a collection can not be changed.  The API returns a new collection with different elements when necessary, instead of mutating the existing collection.  This allows the programmer to safely use set theory operations on collections, use collections functionally, and so on.  Note that because a collection is just a list of elements, it is relatively inexpensive to create new collections.</p>
<p><span class="important-indicator"></span> For very performance intensive code, a collection can be treated as mutable with <a href="#eles.merge"><code>eles.merge()</code></a> and <a href="#eles.unmerge"><code>eles.unmerge()</code></a>.  Most apps should never need these functions.</p>
<h2 id="notation/functions">Functions <a href="#notation/functions"><span class="fa fa-bookmark"></span></a></h2>
<p>There are several types that different functions can be executed on, and the variable names used to denote these types in the documentation are outlined below:</p>
<table>
<thead>
<tr>
<th>Shorthand</th>
<th>Works on</th>
</tr>
</thead>
<tbody><tr>
<td><code>cy</code></td>
<td>the core</td>
</tr>
<tr>
<td><code>eles</code></td>
<td>a collection of one or more elements (nodes and edges)</td>
</tr>
<tr>
<td><code>ele</code></td>
<td>a collection of a single element (node or edge)</td>
</tr>
<tr>
<td><code>nodes</code></td>
<td>a collection of one or more nodes</td>
</tr>
<tr>
<td><code>node</code></td>
<td>a collection of a single node</td>
</tr>
<tr>
<td><code>edges</code></td>
<td>a collection of one or more edges</td>
</tr>
<tr>
<td><code>edge</code></td>
<td>a collection of a single edge</td>
</tr>
<tr>
<td><code>layout</code></td>
<td>a layout</td>
</tr>
<tr>
<td><code>ani</code></td>
<td>an animation</td>
</tr>
</tbody></table>
<p>By default, a function returns a reference back to the calling object to allow for chaining (e.g. <code>obj.fn1().fn2().fn3()</code>).  Unless otherwise indicated in this documentation, a function is chainable in this manner unless a different return value is specified.  This applies both to the core and to collections.</p>
<p>For functions that return a value, note that calling a singular — <code>ele</code>, <code>node</code>, or <code>edge</code> — function on a collection of more than one element will return the expected value for only the first element.</p>
<h2 id="notation/object-ownership">Object ownership <a href="#notation/object-ownership"><span class="fa fa-bookmark"></span></a></h2>
<p>When passing objects to Cytoscape.js for creating elements, animations, layouts, etc., the objects are considered owned by Cytoscape.  Objects like elements have several levels to them, and doing deep copies of those objects every time they are passed to Cytoscape creates additional expense.  When desired, the programmer can copy objects manually before passing them to Cytoscape.  However, copying is not necessary for most programmers most of the time.</p>
<h2 id="notation/gestures">Gestures <a href="#notation/gestures"><span class="fa fa-bookmark"></span></a></h2>
<p>Cytoscape.js supports several gestures:</p>
<ul>
<li>Grab and drag background to pan : touch &amp; desktop</li>
<li>Pinch to zoom : touch &amp; desktop (with supported trackpad)</li>
<li>Mouse wheel to zoom : desktop</li>
<li>Two finger trackpad up or down to zoom : desktop</li>
<li>Tap to select : touch &amp; desktop</li>
<li>Tap background to unselect : desktop</li>
<li>Taphold background to unselect : desktop &amp; touch</li>
<li>Multiple selection via modifier key (shift, command, control, alt) + tap : desktop</li>
<li>Box selection : touch (three finger swipe) &amp; desktop (modifier key + mousedown then drag)</li>
<li>Grab and drag nodes : touch &amp; desktop</li>
</ul>
<p>All gesture actions can be controlled by the programmer, toggling them on or off whenever needed.</p>
<h2 id="notation/position">Position <a href="#notation/position"><span class="fa fa-bookmark"></span></a></h2>
<p>A node’s position refers to the centre point of its body.</p>
<p>There is an important distinction to make for position:  A position may be a <em>model</em> position or a <em>rendered</em> position.</p>
<p>A model position — as its name suggests — is the position stored in the model for an element.  An element’s model position remains constant, despite changes to zoom and pan.  Numeric style property values are specified in model co-ordinates, e.g. a node with width 20px will be 20 pixels wide at zoom 1.</p>
<p>A rendered position is an on-screen location relative to the viewport.  For example, a rendered position of <code>{ x: 100, y: 100 }</code> specifies a point 100 pixels to the right and 100 pixels down from the top-left corner of the viewport.  The model position and rendered position are the same at zoom 1 and pan (0, 0).</p>
<p>An element’s rendered position naturally changes as zoom and pan changes, because the element’s on-screen position in the viewport changes as zooming and panning are applied.  Panning is always measured in rendered coordinates.</p>
<p>In this documentation, “position” refers to model position unless otherwise stated.</p>
<p>A node’s position can be set manually, or it can be set automatically using a <a href="#layouts">layout</a>.  Because the positions of two nodes influence the lengths of the edges in between them, a layout effectively sets edge lengths.</p>
<h2 id="notation/elements-json">Elements JSON <a href="#notation/elements-json"><span class="fa fa-bookmark"></span></a></h2>
<p>Examples are given that outline format of the elements JSON used to load elements into Cytoscape.js:</p>
<pre><code class="language-js">cytoscape({

  <span class="hljs-attr">container</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'cy'</span>),

  <span class="hljs-attr">elements</span>: [ <span class="hljs-comment">// flat array of nodes and edges</span>
    { <span class="hljs-comment">// node n1</span>
      group: <span class="hljs-string">'nodes'</span>, <span class="hljs-comment">// 'nodes' for a node, 'edges' for an edge</span>
      <span class="hljs-comment">// NB the group field can be automatically inferred for you but specifying it</span>
      <span class="hljs-comment">// gives you nice debug messages if you mis-init elements</span>


      data: { <span class="hljs-comment">// element data (put json serialisable dev data here)</span>
        id: <span class="hljs-string">'n1'</span>, <span class="hljs-comment">// mandatory (string) id for each element, assigned automatically on undefined</span>
        parent: <span class="hljs-string">'nparent'</span>, <span class="hljs-comment">// indicates the compound node parent id; not defined =&gt; no parent</span>
        <span class="hljs-comment">// (`parent` can be effectively changed by `eles.move()`)</span>
      },

      <span class="hljs-comment">// scratchpad data (usually temp or nonserialisable data)</span>
      scratch: {
        <span class="hljs-attr">_foo</span>: <span class="hljs-string">'bar'</span> <span class="hljs-comment">// app fields prefixed by underscore; extension fields unprefixed</span>
      },

      <span class="hljs-attr">position</span>: { <span class="hljs-comment">// the model position of the node (optional on init, mandatory after)</span>
        x: <span class="hljs-number">100</span>,
        <span class="hljs-attr">y</span>: <span class="hljs-number">100</span>
      },

      <span class="hljs-attr">selected</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// whether the element is selected (default false)</span>

      selectable: <span class="hljs-literal">true</span>, <span class="hljs-comment">// whether the selection state is mutable (default true)</span>

      locked: <span class="hljs-literal">false</span>, <span class="hljs-comment">// when locked a node's position is immutable (default false)</span>

      grabbable: <span class="hljs-literal">true</span>, <span class="hljs-comment">// whether the node can be grabbed and moved by the user</span>

      pannable: <span class="hljs-literal">false</span>, <span class="hljs-comment">// whether dragging the node causes panning instead of grabbing</span>

      classes: [<span class="hljs-string">'foo'</span>, <span class="hljs-string">'bar'</span>] <span class="hljs-comment">// an array (or a space separated string) of class names that the element has</span>
    },

    { <span class="hljs-comment">// node n2</span>
      data: { <span class="hljs-attr">id</span>: <span class="hljs-string">'n2'</span> },
      <span class="hljs-attr">renderedPosition</span>: { <span class="hljs-attr">x</span>: <span class="hljs-number">200</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">200</span> } <span class="hljs-comment">// can alternatively specify position in rendered on-screen pixels</span>
    },

    { <span class="hljs-comment">// node n3</span>
      data: { <span class="hljs-attr">id</span>: <span class="hljs-string">'n3'</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">'nparent'</span> },
      <span class="hljs-attr">position</span>: { <span class="hljs-attr">x</span>: <span class="hljs-number">123</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">234</span> }
    },

    { <span class="hljs-comment">// node nparent</span>
      data: { <span class="hljs-attr">id</span>: <span class="hljs-string">'nparent'</span> }
    },

    { <span class="hljs-comment">// edge e1</span>
      data: {
        <span class="hljs-attr">id</span>: <span class="hljs-string">'e1'</span>,
        <span class="hljs-comment">// inferred as an edge because `source` and `target` are specified:</span>
        source: <span class="hljs-string">'n1'</span>, <span class="hljs-comment">// the source node id (edge comes from this node)</span>
        target: <span class="hljs-string">'n2'</span>  <span class="hljs-comment">// the target node id (edge goes to this node)</span>
        <span class="hljs-comment">// (`source` and `target` can be effectively changed by `eles.move()`)</span>
      },

      <span class="hljs-attr">pannable</span>: <span class="hljs-literal">true</span> <span class="hljs-comment">// whether dragging on the edge causes panning</span>
    }
  ],

  <span class="hljs-attr">layout</span>: {
    <span class="hljs-attr">name</span>: <span class="hljs-string">'preset'</span>
  },

  <span class="hljs-comment">// so we can see the ids</span>
  style: [
    {
      <span class="hljs-attr">selector</span>: <span class="hljs-string">'node'</span>,
      <span class="hljs-attr">style</span>: {
        <span class="hljs-string">'label'</span>: <span class="hljs-string">'data(id)'</span>
      }
    }
  ]

});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>The elements JSON may alternatively be in the following format, keyed by group:</p>
<pre><code class="language-js">cytoscape({
  <span class="hljs-attr">container</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'cy'</span>),

  <span class="hljs-attr">elements</span>: {
    <span class="hljs-attr">nodes</span>: [
      {
        <span class="hljs-attr">data</span>: { <span class="hljs-attr">id</span>: <span class="hljs-string">'a'</span> }
      },

      {
        <span class="hljs-attr">data</span>: { <span class="hljs-attr">id</span>: <span class="hljs-string">'b'</span> }
      }
    ],
    <span class="hljs-attr">edges</span>: [
      {
        <span class="hljs-attr">data</span>: { <span class="hljs-attr">id</span>: <span class="hljs-string">'ab'</span>, <span class="hljs-attr">source</span>: <span class="hljs-string">'a'</span>, <span class="hljs-attr">target</span>: <span class="hljs-string">'b'</span> }
      }
    ]
  },

  <span class="hljs-attr">layout</span>: {
    <span class="hljs-attr">name</span>: <span class="hljs-string">'grid'</span>,
    <span class="hljs-attr">rows</span>: <span class="hljs-number">1</span>
  },

  <span class="hljs-comment">// so we can see the ids</span>
  style: [
    {
      <span class="hljs-attr">selector</span>: <span class="hljs-string">'node'</span>,
      <span class="hljs-attr">style</span>: {
        <span class="hljs-string">'label'</span>: <span class="hljs-string">'data(id)'</span>
      }
    }
  ]
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h2 id="notation/compound-nodes">Compound nodes <a href="#notation/compound-nodes"><span class="fa fa-bookmark"></span></a></h2>
<p>Compound nodes are an addition to the traditional graph model.  A compound node contains a number of child nodes, similar to how a HTML DOM element can contain a number of child elements.</p>
<p>Compound nodes are specified via the <code>parent</code> field in an element’s <code>data</code>.  Similar to the <code>source</code> and <code>target</code> fields of edges, the <code>parent</code> field is normally immutable:  A node’s parent can be specified when the node is added to the graph, and after that point, this parent-child relationship is immutable via <code>ele.data()</code>.  However, you can  move child nodes via <a href="#collection/graph-manipulation/eles.move"><code>eles.move()</code></a>.</p>
<p><span class="important-indicator"></span> A compound parent node does not have independent dimensions (position and size), as those values are automatically inferred by the positions and dimensions of the descendant nodes.</p>
<p>As far as the API is concerned, compound nodes are treated just like regular nodes — except in <a href="#collection/compound-nodes">explicitly compound functions</a> like <code>node.parent()</code>.  This means that traditional graph theory functions like <code>eles.dijkstra()</code> and <code>eles.neighborhood()</code> do not make special allowances for compound nodes, so you may need to make different calls to the API depending on your usecase.</p>
<p>For instance:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> a = cy.$(<span class="hljs-string">'#a'</span>); <span class="hljs-comment">// assume a compound node</span>

<span class="hljs-comment">// the neighbourhood of `a` contains directly connected elements</span>
<span class="hljs-keyword">var</span> directlyConnected = a.neighborhood();

<span class="hljs-comment">// you may want everything connected to its descendants instead</span>
<span class="hljs-comment">// because the descendants "belong" to `a`</span>
<span class="hljs-keyword">var</span> indirectlyConnected = a.add( a.descendants() ).neighborhood();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>


				<h1 id="getting-started">Getting started <a href="#getting-started"><span class="fa fa-bookmark"></span></a></h1>

					<p>This section will familiarise you with the basic steps necessary to start using Cytoscape.js.</p>
<h2 id="getting-started/including-cytoscape.js">Including Cytoscape.js <a href="#getting-started/including-cytoscape.js"><span class="fa fa-bookmark"></span></a></h2>
<p>If you are using a simple HTML environment (without a build system), then source Cytoscape.js in a <code>&lt;script&gt;</code> tag or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import</code></a> it as an ES6 module, e.g.:</p>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"cytoscape.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
<p>or</p>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">import</span> cytoscape <span class="hljs-keyword">from</span> <span class="hljs-string">"./cytoscape.esm.min.js"</span>;
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
<p>To use Cytoscape.js from a CDN, use one of the following CDNs:</p>
<ul>
<li><a href="https://cdnjs.com/libraries/cytoscape">CDNJS</a></li>
<li><a href="https://www.jsdelivr.com/package/npm/cytoscape?path=dist">jsDelivr</a></li>
<li><a href="https://pagecdn.com/lib/cytoscape">PageCDN</a></li>
<li><a href="https://unpkg.com/cytoscape/dist/">Unpkg</a></li>
</ul>
<p>Please do not hotlink to copies of Cytoscape.js from the documentation — they’re just for the demos.</p>
<p>The available files are available under <a href="https://github.com/cytoscape/cytoscape.js/tree/master/dist"><code>cytoscape/dist/</code></a> in the npm package:</p>
<ul>
<li><code>cytoscape.min.js</code> : A minified UMD build with all dependencies included in the bundle.  This file is useful for small pages, supplementary material for an academic paper for example.</li>
<li><code>cytoscape.umd.js</code> : A non-minified UMD build with all dependencies included in the bundle.  This file is useful for debugging on small pages, supplementary material for an academic paper for example.</li>
<li><code>cytoscape.esm.min.js</code> : A minified ESM (<code>import</code> / <code>export</code>) build with all dependencies included in the bundle.  This file serves the same purpose as the above, but it can be imported as an ES6 module without the need for a bundler.</li>
<li><code>cytoscape.cjs.js</code> : A non-minified CJS (Node.js) build without any bundled dependencies.  This is intended to be consumed automatically by Node.js or a bundler like Webpack via <code>require(&#39;cytoscape&#39;)</code>.</li>
<li><code>cytoscape.esm.js</code> : A non-minified ESM (<code>import</code> / <code>export</code>) build without any bundled dependencies.  This is intended to be consumed automatically by Node.js or a bundler like Webpack via <code>import cytoscape from &#39;cytoscape&#39;</code>.</li>
</ul>
<p><span class="important-indicator"></span> Note that Cytoscape.js uses the dimensions of your HTML DOM element container for layouts and rendering at initialisation.  Thus, it is very important to place your CSS stylesheets in the <code>&lt;head&gt;</code> before any Cytoscape.js-related code.  Otherwise, dimensions may be sporadically reported incorrectly, resulting in undesired behaviour.</p>
<p>Your stylesheet may include something like this (assuming a DOM element with ID <code>cy</code> is used as the container):</p>
<pre><code class="language-css"><span class="hljs-selector-id">#cy</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
  <span class="hljs-attribute">display</span>: block;
}</code></pre>
<p>To install Cytoscape.js via npm:</p>
<pre><code class="language-bash">npm install cytoscape</code></pre>
<p>To use Cytoscape.js in a ESM environment with npm (e.g. Webpack or Node.js with the <a href="https://www.npmjs.com/package/esm"><code>esm</code></a> package):</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> cytoscape <span class="hljs-keyword">from</span> <span class="hljs-string">'cytoscape'</span>;</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>To use Cytoscape.js in a CommonJS environment like Node.js:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> cytoscape = <span class="hljs-built_in">require</span>(<span class="hljs-string">'cytoscape'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>To use Cytoscape.js with AMD/Require.js:</p>
<pre><code class="language-js"><span class="hljs-built_in">require</span>([<span class="hljs-string">'cytoscape'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">cytoscape</span>)</span>{
  <span class="hljs-comment">// ...</span>
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>To install Cytoscape.js via Bower:</p>
<pre><code class="language-bash">bower install cytoscape</code></pre>
<p>To install Cytoscape.js via Meteor/Atmosphere:</p>
<pre><code class="language-bash">npm install cytoscape</code></pre>
<p>Cytoscape.js supports environments with ES5 or newer, as it is transpiled by Babel and it uses only basic features of the standard library.  Feature detection is used for optional features that improve performance.  However, a future version of Cytoscape.js may require a more up-to-date version of the standard library.  You may want to use <a href="https://babeljs.io/docs/usage/polyfill/"><code>babel-polyfill</code></a> or <a href="https://github.com/zloirock/core-js"><code>core-js</code></a> if you want to support old browsers in future.</p>
<h2 id="getting-started/initialisation">Initialisation <a href="#getting-started/initialisation"><span class="fa fa-bookmark"></span></a></h2>
<p>An instance of Cytoscape.js corresponds to a graph.  You can create an instance as follows:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> cy = cytoscape({
  <span class="hljs-attr">container</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'cy'</span>) <span class="hljs-comment">// container to render in</span>
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>You can pass a jQuery instance as the <code>container</code> for convenience:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> cy = cytoscape({
  <span class="hljs-attr">container</span>: $(<span class="hljs-string">'#cy'</span>)
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>If you are running Cytoscape.js in Node.js or otherwise running it headlessly, you will not specify the <code>container</code> option.  In implicitly headless environments like Node.js, an instance is automatically headless.  To explicitly run a headless instance (e.g. in the browser) you can specify <code>options.headless</code> as <code>true</code>.</p>
<h2 id="getting-started/specifying-basic-options">Specifying basic options <a href="#getting-started/specifying-basic-options"><span class="fa fa-bookmark"></span></a></h2>
<p>For visualisation, the <code>container</code>, <a href="#notation/elements-json"><code>elements</code></a>, <a href="#style"><code>style</code></a>, and <a href="#layouts"><code>layout</code></a> options usually should be set:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> cy = cytoscape({

  <span class="hljs-attr">container</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'cy'</span>), <span class="hljs-comment">// container to render in</span>

  elements: [ <span class="hljs-comment">// list of graph elements to start with</span>
    { <span class="hljs-comment">// node a</span>
      data: { <span class="hljs-attr">id</span>: <span class="hljs-string">'a'</span> }
    },
    { <span class="hljs-comment">// node b</span>
      data: { <span class="hljs-attr">id</span>: <span class="hljs-string">'b'</span> }
    },
    { <span class="hljs-comment">// edge ab</span>
      data: { <span class="hljs-attr">id</span>: <span class="hljs-string">'ab'</span>, <span class="hljs-attr">source</span>: <span class="hljs-string">'a'</span>, <span class="hljs-attr">target</span>: <span class="hljs-string">'b'</span> }
    }
  ],

  <span class="hljs-attr">style</span>: [ <span class="hljs-comment">// the stylesheet for the graph</span>
    {
      <span class="hljs-attr">selector</span>: <span class="hljs-string">'node'</span>,
      <span class="hljs-attr">style</span>: {
        <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'#666'</span>,
        <span class="hljs-string">'label'</span>: <span class="hljs-string">'data(id)'</span>
      }
    },

    {
      <span class="hljs-attr">selector</span>: <span class="hljs-string">'edge'</span>,
      <span class="hljs-attr">style</span>: {
        <span class="hljs-string">'width'</span>: <span class="hljs-number">3</span>,
        <span class="hljs-string">'line-color'</span>: <span class="hljs-string">'#ccc'</span>,
        <span class="hljs-string">'target-arrow-color'</span>: <span class="hljs-string">'#ccc'</span>,
        <span class="hljs-string">'target-arrow-shape'</span>: <span class="hljs-string">'triangle'</span>
      }
    }
  ],

  <span class="hljs-attr">layout</span>: {
    <span class="hljs-attr">name</span>: <span class="hljs-string">'grid'</span>,
    <span class="hljs-attr">rows</span>: <span class="hljs-number">1</span>
  }

});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h2 id="getting-started/next-steps">Next steps <a href="#getting-started/next-steps"><span class="fa fa-bookmark"></span></a></h2>
<p>Now that you have a core (graph) instance with basic options, explore the <a href="#core">core API</a>.  It’s your entry point to all the features in Cytoscape.js.</p>
<p>If you have code questions about Cytoscape.js, please feel free to <a href="http://stackoverflow.com/questions/ask?tags=cytoscape.js">post your question to Stackoverflow</a>.</p>



				<h1 id="core">Core <a href="#core"><span class="fa fa-bookmark"></span></a></h1>

					<p>The core object is your interface to a graph.  It is your entry point to Cytoscape.js:  All of the library’s features are accessed through this object.</p>



					<h2 id="core/initialisation">Initialisation <a href="#core/initialisation"><span class="fa fa-bookmark"></span></a></h2>


						<h3 id="initialisation">Initialisation</h3>
<p>A graph can be created as follows:</p>
<pre><code><span class="hljs-keyword">var</span> cy = cytoscape({ <span class="hljs-comment">/* options */</span> });</code></pre><p>You can initialise the core without any options.  If you want to use Cytoscape as a visualisation, then a <code>container</code> DOM element is required, e.g.:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> cy = cytoscape({
  <span class="hljs-attr">container</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'cy'</span>)
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Note that in order to guarantee custom font usage (WOFF/WOFF2), the fonts in question must be loaded before Cytoscape is initialised.</p>
<p>Note that Cytoscape.js will print warning messages to the console to help programmers avoid mistakes.  If you want to disable these messages, call <code>cytoscape.warnings(false)</code> to turn warnings off completely.  You can turn them back on with <code>cytoscape.warnings(true)</code>, and you can get the current state with <code>cytoscape.warnings()</code>.  It is recommended that you leave warnings enabled at least for development builds of your app.</p>
<p>The following sections go over the options in more detail.</p>
<h3 id="initialisation-options">Initialisation options</h3>
<p>An instance of Cytoscape.js has a number of options that can be set on initialisation.  They are outlined below with their default values.</p>
<p><span class="important-indicator"></span> Note that everything is optional.  By default, you get an empty graph with the default stylesheet.  Environments outside the browser (e.g. Node.js) are automatically set as headless for convenience.</p>
<pre><code>var cy = cytoscape({
  // very commonly used options
  <a href="#init-opts/container">container</a>: undefined,
  <a href="#init-opts/elements">elements</a>: [ /* ... */ ],
  <a href="#init-opts/style">style</a>: [ /* ... */ ],
  <a href="#init-opts/layout">layout</a>: { name: 'grid' /* , ... */ },

  // initial viewport state:
  <a href="#init-opts/zoom">zoom</a>: 1,
  <a href="#init-opts/pan">pan</a>: { x: 0, y: 0 },

  // interaction options:
  <a href="#init-opts/minZoom">minZoom</a>: 1e-50,
  <a href="#init-opts/maxZoom">maxZoom</a>: 1e50,
  <a href="#init-opts/zoomingEnabled">zoomingEnabled</a>: true,
  <a href="#init-opts/userZoomingEnabled">userZoomingEnabled</a>: true,
  <a href="#init-opts/panningEnabled">panningEnabled</a>: true,
  <a href="#init-opts/userPanningEnabled">userPanningEnabled</a>: true,
  <a href="#init-opts/boxSelectionEnabled">boxSelectionEnabled</a>: true,
  <a href="#init-opts/selectionType">selectionType</a>: 'single',
  <a href="#init-opts/touchTapThreshold">touchTapThreshold</a>: 8,
  <a href="#init-opts/desktopTapThreshold">desktopTapThreshold</a>: 4,
  <a href="#init-opts/autolock">autolock</a>: false,
  <a href="#init-opts/autoungrabify">autoungrabify</a>: false,
  <a href="#init-opts/autounselectify">autounselectify</a>: false,

  // rendering options:
  <a href="#init-opts/headless">headless</a>: false,
  <a href="#init-opts/styleEnabled">styleEnabled</a>: true,
  <a href="#init-opts/hideEdgesOnViewport">hideEdgesOnViewport</a>: false,
  <a href="#init-opts/textureOnViewport">textureOnViewport</a>: false,
  <a href="#init-opts/motionBlur">motionBlur</a>: false,
  <a href="#init-opts/motionBlurOpacity">motionBlurOpacity</a>: 0.2,
  <a href="#init-opts/wheelSensitivity">wheelSensitivity</a>: 1,
  <a href="#init-opts/pixelRatio">pixelRatio</a>: 'auto'
});
</code></pre>

<h3 id="very-commonly-used-options">Very commonly used options</h3>
<p><span id="init-opts/container"></span>
<strong><code>container</code></strong> : A HTML DOM element in which the graph should be rendered.  This is unspecified if Cytoscape.js is run headlessly.  The container is expected to be an empty div; the visualisation owns the div.</p>
<p><span id="init-opts/elements"></span>
<strong><code>elements</code></strong> : An array of <a href="#notation/elements-json">elements specified as plain objects</a>.  For convenience, this option can alternatively be specified as a promise that resolves to the elements JSON.</p>
<p><span id="init-opts/style"></span>
<strong><code>style</code></strong> : The <a href="#style">stylesheet</a> used to style the graph.  For convenience, this option can alternatively be specified as a promise that resolves to the stylesheet.</p>
<p><span id="init-opts/layout"></span>
<strong><code>layout</code></strong> : A plain object that specifies layout options.  Which layout is initially run is specified by the <code>name</code> field.  Refer to a <a href="#layouts">layout’s documentation</a> for the options it supports.  If you want to specify your node positions yourself in your elements JSON, you can use the <code>preset</code> layout — by default it does not set any positions, leaving your nodes in their current positions (i.e. specified in <code>options.elements</code> at initialisation time).</p>
<h3 id="initial-viewport-state">Initial viewport state</h3>
<p><span id="init-opts/zoom"></span>
<strong><code>zoom</code></strong> : The initial zoom level of the graph.  Make sure to disable viewport manipulation options, such as <code>fit</code>, in your layout so that it is not overridden when the layout is applied.  You can set <strong><code>options.minZoom</code></strong> and <strong><code>options.maxZoom</code></strong> to set restrictions on the zoom level.</p>
<p><span id="init-opts/pan"></span>
<strong><code>pan</code></strong> : The initial panning position of the graph.  Make sure to disable viewport manipulation options, such as <code>fit</code>, in your layout so that it is not overridden when the layout is applied.</p>
<h3 id="interaction-options">Interaction options</h3>
<p><span id="init-opts/minZoom"></span>
<strong><code>minZoom</code></strong> : A minimum bound on the zoom level of the graph.  The viewport can not be scaled smaller than this zoom level.</p>
<p><span id="init-opts/maxZoom"></span>
<strong><code>maxZoom</code></strong> : A maximum bound on the zoom level of the graph.  The viewport can not be scaled larger than this zoom level.</p>
<p><span id="init-opts/zoomingEnabled"></span>
<strong><code>zoomingEnabled</code></strong> : Whether zooming the graph is enabled, both by user events and programmatically.</p>
<p><span id="init-opts/userZoomingEnabled"></span>
<strong><code>userZoomingEnabled</code></strong> : Whether user events (e.g. mouse wheel, pinch-to-zoom) are allowed to zoom the graph.  Programmatic changes to zoom are unaffected by this option.</p>
<p><span id="init-opts/panningEnabled"></span>
<strong><code>panningEnabled</code></strong> : Whether panning the graph is enabled, both by user events and programmatically.</p>
<p><span id="init-opts/userPanningEnabled"></span>
<strong><code>userPanningEnabled</code></strong> : Whether user events (e.g. dragging the graph background) are allowed to pan the graph.  Programmatic changes to pan are unaffected by this option.</p>
<p><span id="init-opts/boxSelectionEnabled"></span>
<strong><code>boxSelectionEnabled</code></strong> : Whether box selection (i.e. drag a box overlay around, and release it to select) is enabled.  If enabled while panning is also enabled, the user must use a modifier key (shift, alt, control, or command) to use box selection.</p>
<p><span id="init-opts/selectionType"></span>
<strong><code>selectionType</code></strong> : A string indicating the selection behaviour from user input.  For <code>&#39;additive&#39;</code>, a new selection made by the user adds to the set of currently selected elements.  For <code>&#39;single&#39;</code>, a new selection made by the user becomes the entire set of currently selected elements (i.e. the previous elements are unselected).</p>
<p><span id="init-opts/touchTapThreshold"></span>
<span id="init-opts/desktopTapThreshold"></span>
<strong><code>touchTapThreshold</code></strong> &amp; <strong><code>desktopTapThreshold</code></strong> : A non-negative integer that indicates the maximum allowable distance that a user may move during a tap gesture, on touch devices and desktop devices respectively.  This makes tapping easier for users.  These values have sane defaults, so it is not advised to change these options unless you have very good reason for doing so.  Large values will almost certainly have undesirable consequences.</p>
<p><span id="init-opts/autoungrabify"></span>
<strong><code>autoungrabify</code></strong> : Whether nodes should be ungrabified (not grabbable by user) by default (if <code>true</code>, overrides individual node state).</p>
<p><span id="init-opts/autolock"></span>
<strong><code>autolock</code></strong> : Whether nodes should be locked (not draggable at all) by default (if <code>true</code>, overrides individual node state).</p>
<p><span id="init-opts/autounselectify"></span>
<strong><code>autounselectify</code></strong> : Whether nodes should be unselectified (immutable selection state) by default (if <code>true</code>, overrides individual element state).</p>
<h3 id="rendering-options">Rendering options</h3>
<p><span id="init-opts/headless"></span>
<strong><code>headless</code></strong> : A convenience option that initialises the instance to run headlessly.  You do not need to set this in environments that are implicitly headless (e.g. Node.js).  However, it is handy to set <code>headless: true</code> if you want a headless instance in a browser.</p>
<p><span id="init-opts/styleEnabled"></span>
<strong><code>styleEnabled</code></strong> : A boolean that indicates whether styling should be used.  For headless (i.e. outside the browser) environments, display is not necessary and so neither is styling necessary — thereby speeding up your code.  You can manually enable styling in headless environments if you require it for a special case.  Note that it does not make sense to disable style if you plan on rendering the graph.  Also note that <a href="#cy.destroy"><code>cy.destroy()</code></a> must be called to clean up a style-enabled, headless instance.</p>
<p><span id="init-opts/hideEdgesOnViewport"></span>
<strong><code>hideEdgesOnViewport</code></strong> : A rendering hint that when set to <code>true</code> makes the renderer not render edges while the viewport is being manipulated.  This makes panning, zooming, dragging, et cetera more responsive for large graphs.  This option is now largely moot, as a result of performance enhancements.</p>
<p><span id="init-opts/textureOnViewport"></span>
<strong><code>textureOnViewport</code></strong> : A rendering hint that when set to <code>true</code> makes the renderer use a texture  during panning and zooming instead of drawing the elements, making large graphs more responsive.  This option is now largely moot, as a result of performance enhancements.</p>
<p><span id="init-opts/motionBlur"></span>
<strong><code>motionBlur</code></strong> : A rendering hint that when set to <code>true</code> makes the renderer use a motion blur effect to make the transition between frames seem smoother.  This can increase the perceived performance for a large graphs.  This option is now largely moot, as a result of performance enhancements.</p>
<p><span id="init-opts/motionBlurOpacity"></span>
<strong><code>motionBlurOpacity</code></strong> : When <code>motionBlur: true</code>, this value controls the opacity of motion blur frames.  Higher values make the motion blur effect more pronounced.  This option is now largely moot, as a result of performance enhancements.</p>
<p><span id="init-opts/wheelSensitivity"></span>
<strong><code>wheelSensitivity</code></strong> : Changes the scroll wheel sensitivity when zooming.  This is a multiplicative modifier.  So, a value between 0 and 1 reduces the sensitivity (zooms slower), and a value greater than 1 increases the sensitivity (zooms faster).  This option is set to a sane value that works well for mainstream mice (Apple, Logitech, Microsoft) on Linux, Mac, and Windows.  If the default value seems too fast or too slow on your particular system, you may have non-default mouse settings in your OS or a niche mouse.  You should not change this value unless your app is meant to work only on specific hardware.  Otherwise, you risk making zooming too slow or too fast for most users.</p>
<p><span id="init-opts/pixelRatio"></span>
<strong><code>pixelRatio</code></strong> : Overrides the screen pixel ratio with a manually set value (<code>1.0</code> recommended, if set).  This can be used to increase performance on high density displays by reducing the effective area that needs to be rendered, though this is much less necessary on more recent browser releases.  If you want to use the hardware’s actual pixel ratio, you can set <code>pixelRatio: &#39;auto&#39;</code> (default).</p>




					<h2 id="core/graph-manipulation">Graph manipulation <a href="#core/graph-manipulation"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="cy.add">
								<span class="fn-name">cy.add()</span>  <a href="#cy.add"><span class="fa fa-bookmark"></span></a>
								<span id="core/graph-manipulation/cy.add">&nbsp;</span><span id="core/graph-manipulation/cy.add">&nbsp;</span><span id="cy.add">&nbsp;</span><span id="core/graph-manipulation/cy.add">&nbsp;</span><span id="cy.add">&nbsp;</span><span id="core/graph-manipulation/cy.add">&nbsp;</span><span id="cy.add">&nbsp;</span>
							</div>



							<div class="descr"><p>Add elements to the graph and return them.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.add( <span class="args-summary"><span class="comma">,&nbsp;</span>eleObj</span> )</div>


										<div class="descr"><p>Add a specified element to the graph.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#notation/elements-json">eleObj</a></span>
													
													<span class="descr"><p>A plain object that specifies the element.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.add( <span class="args-summary"><span class="comma">,&nbsp;</span>eleObjs</span> )</div>


										<div class="descr"><p>Add the specified elements to the graph.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#notation/elements-json">eleObjs</a></span>
													
													<span class="descr"><p>An array of elements specified by plain objects.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.add( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"><p>Add the specified elements to the graph.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>A collection of elements.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>If plain element objects are used, then <a href="#core/initialisation">the same format used at initialisation</a> must be followed.</p>
<p>If a collection of existing elements is specified to a different core instance, then copies of those elements are added, which allows for elements to be effectively transferred between instances of Cytoscape.js.</p>
<h3 id="examples">Examples</h3>
<p>Add a node from a plain object.</p>
<pre><code class="language-js">cy.add({
    <span class="hljs-attr">group</span>: <span class="hljs-string">'nodes'</span>,
    <span class="hljs-attr">data</span>: { <span class="hljs-attr">weight</span>: <span class="hljs-number">75</span> },
    <span class="hljs-attr">position</span>: { <span class="hljs-attr">x</span>: <span class="hljs-number">200</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">200</span> }
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Add nodes and edges to the graph as plain objects:</p>
<pre><code class="language-js"><span class="hljs-comment">// can use reference to eles later</span>
<span class="hljs-keyword">var</span> eles = cy.add([
  { <span class="hljs-attr">group</span>: <span class="hljs-string">'nodes'</span>, <span class="hljs-attr">data</span>: { <span class="hljs-attr">id</span>: <span class="hljs-string">'n0'</span> }, <span class="hljs-attr">position</span>: { <span class="hljs-attr">x</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">100</span> } },
  { <span class="hljs-attr">group</span>: <span class="hljs-string">'nodes'</span>, <span class="hljs-attr">data</span>: { <span class="hljs-attr">id</span>: <span class="hljs-string">'n1'</span> }, <span class="hljs-attr">position</span>: { <span class="hljs-attr">x</span>: <span class="hljs-number">200</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">200</span> } },
  { <span class="hljs-attr">group</span>: <span class="hljs-string">'edges'</span>, <span class="hljs-attr">data</span>: { <span class="hljs-attr">id</span>: <span class="hljs-string">'e0'</span>, <span class="hljs-attr">source</span>: <span class="hljs-string">'n0'</span>, <span class="hljs-attr">target</span>: <span class="hljs-string">'n1'</span> } }
]);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.remove">
								<span class="fn-name">cy.remove()</span>  <a href="#cy.remove"><span class="fa fa-bookmark"></span></a>
								<span id="core/graph-manipulation/cy.remove">&nbsp;</span><span id="core/graph-manipulation/cy.remove">&nbsp;</span><span id="cy.remove">&nbsp;</span><span id="core/graph-manipulation/cy.remove">&nbsp;</span><span id="cy.remove">&nbsp;</span>
							</div>



							<div class="descr"><p>Remove elements from the graph and return them.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.remove( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"><p>Remove the specified elements.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>A collection of elements to remove.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.remove( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"><p>Remove elements in the graph matching the specified selector.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>Elements matching this selector are removed.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p><span class='important-indicator'></span> Note that removing a node necessarily removes its connected edges.</p>
<p>Though the elements specified to this function are removed from the graph, they may still exist in memory.  However, almost all functions will not work on removed elements.  For example, the <code>eles.neighborhood()</code> function will fail for a removed element:  An element outside of the context of the graph can not have a neighbourhood defined.  A removed element exists only so you can restore it back to the originating core instance or to a new instance.</p>
<h3 id="examples">Examples</h3>
<p>Remove an element:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);
cy.remove( j );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Remove a collection:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> collection = cy.elements(<span class="hljs-string">'node[weight &gt; 50]'</span>);
cy.remove( collection );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Remove elements matching a selector:</p>
<pre><code class="language-js">cy.remove(<span class="hljs-string">'node[weight &gt; 50]'</span>); <span class="hljs-comment">// remove nodes with weight greater than 50</span></code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.collection">
								<span class="fn-name">cy.collection()</span>  <a href="#cy.collection"><span class="fa fa-bookmark"></span></a>
								<span id="core/graph-manipulation/cy.collection">&nbsp;</span><span id="core/graph-manipulation/cy.collection">&nbsp;</span><span id="cy.collection">&nbsp;</span>
							</div>



							<div class="descr"><p>Return a new, empty collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.collection()</div>


										<div class="descr"><p>Get an empty collection.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function is useful for building up collections.</p>
<h3 id="examples">Examples</h3>
<p>Keep a collection of nodes that have been clicked:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> collection = cy.collection();
cy.nodes().on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{
  <span class="hljs-keyword">var</span> clickedNode = e.target;

  collection = collection.union(clickedNode);
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.getElementById">
								<span class="fn-name">cy.getElementById()</span>  <a href="#cy.getElementById"><span class="fa fa-bookmark"></span></a>
								<span id="core/graph-manipulation/cy.getElementById">&nbsp;</span><span id="core/graph-manipulation/cy.$id">&nbsp;</span><span id="cy.$id">&nbsp;</span><span id="core/graph-manipulation/cy.getElementById">&nbsp;</span><span id="cy.getElementById">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="core/graph-manipulation/cy.$id" class="pure-alias-name">cy.$id()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get an element from its ID in a very performant way.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.getElementById( <span class="args-summary"><span class="comma">,&nbsp;</span>id</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">id</span>
													
													<span class="descr"><p>The ID of the element to get.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.getElementById(<span class="hljs-string">'j'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Using the shorter alias:</p>
<pre><code class="language-js">cy.$id(<span class="hljs-string">'j'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.$">
								<span class="fn-name">cy.$()</span> et al <a href="#cy.$"><span class="fa fa-bookmark"></span></a>
								<span id="core/graph-manipulation/cy.$">&nbsp;</span><span id="core/graph-manipulation/cy.$">&nbsp;</span><span id="cy.$">&nbsp;</span><span id="core/graph-manipulation/cy.elements">&nbsp;</span><span id="cy.elements">&nbsp;</span><span id="core/graph-manipulation/cy.nodes">&nbsp;</span><span id="cy.nodes">&nbsp;</span><span id="core/graph-manipulation/cy.edges">&nbsp;</span><span id="cy.edges">&nbsp;</span><span id="core/graph-manipulation/cy.filter">&nbsp;</span><span id="cy.filter">&nbsp;</span><span id="core/graph-manipulation/cy.filter">&nbsp;</span><span id="cy.filter">&nbsp;</span>
							</div>



							<div class="descr"><p>Get elements in the graph matching a selector or a filter function.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.$( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"><p>Get elements in the graph matching the specified selector.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>The selector the elements should match.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.elements( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"><p>Get elements in the graph matching the specified selector.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>The selector the elements should match.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.nodes( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"><p>Get nodes in the graph matching the specified selector.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>The selector the nodes should match.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.edges( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"><p>Get edges in the graph matching the specified selector.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>The selector the edges should match.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.filter( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"><p>Get elements in the graph matching the specified selector.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>The selector the elements should match.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.filter( <span class="args-summary"><span class="comma">,&nbsp;</span>function(ele, i, eles)</span> )</div>


										<div class="descr"><p>Get elements in the graph matching the specified filter function.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">function(ele, i, eles)</span>
													
													<span class="descr"><p>The filter function that returns true for elements that should be returned.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">ele</a></span>
																
																<span class="descr"><p>The current element under consideration for filtering.</p>
</span>
															</li>

															<li>
																<span class="name">i</span>
																
																<span class="descr"><p>The counter used for iteration over the elements in the graph.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#collection">eles</a></span>
																
																<span class="descr"><p>The collection of elements being filtered</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>If no elements in the graph match the selector, an empty <a href="#collection">collection</a> is returned.</p>
<p>The function <code>cy.$()</code> acts as an alias to <code>cy.filter()</code>:  It lets you type less characters.  It is analogous to the jQuery <code>$</code> alias used to search the document</p>
<h3 id="examples">Examples</h3>
<p>Get nodes with weight greater than 50:</p>
<pre><code class="language-js">cy.nodes(<span class="hljs-string">'[weight &gt; 50]'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Get edges with source node <code>n0</code>:</p>
<pre><code class="language-js">cy.edges(<span class="hljs-string">'[source = "j"]'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Get all nodes and edges with weight greater than 50:</p>
<pre><code class="language-js">cy.elements(<span class="hljs-string">'[weight &gt; 50]'</span>);
cy.filter(<span class="hljs-string">'[weight &gt; 50]'</span>); <span class="hljs-comment">// works the same as the above line</span></code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Get nodes with weight greater than 50 with a filter function:</p>
<pre><code class="language-js">cy.filter(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">element, i</span>)</span>{
  <span class="hljs-keyword">return</span> element.isNode() &amp;&amp; element.data(<span class="hljs-string">'weight'</span>) &gt; <span class="hljs-number">50</span>;
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.batch">
								<span class="fn-name">cy.batch()</span> et al <a href="#cy.batch"><span class="fa fa-bookmark"></span></a>
								<span id="core/graph-manipulation/cy.batch">&nbsp;</span><span id="core/graph-manipulation/cy.batch">&nbsp;</span><span id="cy.batch">&nbsp;</span><span id="core/graph-manipulation/cy.startBatch">&nbsp;</span><span id="cy.startBatch">&nbsp;</span><span id="core/graph-manipulation/cy.endBatch">&nbsp;</span><span id="cy.endBatch">&nbsp;</span>
							</div>



							<div class="descr"><p>Allow for manipulation of elements without triggering multiple style calculations or multiple redraws.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.batch( <span class="args-summary"><span class="comma">,&nbsp;</span>function()</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">function()</span>
													
													<span class="descr"><p>A callback within which you can make batch updates to elements.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.startBatch()</div>


										<div class="descr"><p>Starts batching manually (useful for asynchronous cases).</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.endBatch()</div>


										<div class="descr"><p>Ends batching manually (useful for asynchronous cases).</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p><span class="important-indicator"></span> Do not add batching to your app unless you have identified an applicable performance bottleneck.  There are restrictions on what kind of code you can run in a batch.</p>
<p>Normally, when you modify elements, each modification can trigger a style calculation and a redraw — depending on timing for a redraw.  For example, the following will cause two style calculations and at least one draw:</p>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>)
  .data(<span class="hljs-string">'weight'</span>, <span class="hljs-string">'70'</span>)   <span class="hljs-comment">// style update</span>
  .addClass(<span class="hljs-string">'funny'</span>)      <span class="hljs-comment">// style update AGAIN</span>
  .removeClass(<span class="hljs-string">'serious'</span>) <span class="hljs-comment">// style update YET AGAIN</span>

  <span class="hljs-comment">// at least 1 redraw here</span>
  <span class="hljs-comment">// possibly 3 total depending on speed of above operations</span>
  <span class="hljs-comment">// (for one ele almost certainly 1 redraw, but consider many eles)</span>
;</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>This is not a problem for a handful of operations on a handful of elements, but for many operations on many elements you end up with redundant style calculations and probably redundant redraws.  In the worst case, you have <code>eles.length * numOps</code> style updates and redraws — and both style updates and redraws can be expensive.  In the worst case when using <code>cy.batch()</code>, you limit the style updates to <code>eles.length</code> and you limit the redraws to just one.</p>
<p>Thus, this function is useful for making many changes to elements at once.  When the specified callback function is complete, only elements that require it have their style updated and the renderer makes at most a single redraw.</p>
<p>This makes for very efficient modifications to elements, but it has some caveats inside a batch:</p>
<ul>
<li>You can not reliably read element style or dimensions (it may have changed, or computed values may be out of date).</li>
<li>You probably do not want to use <code>eles.style()</code> et cetera because they force a style bypass rather than a recalculation.</li>
<li>You can not apply any style-dependent operation within the batch if you have already modified style within the same batch.  Common style-dependent operations include:<ul>
<li>Layout: <code>cy.layout()</code>, <code>eles.layout()</code>, etc.</li>
<li>Reading style: <code>ele.style()</code>, <code>ele.numericStyle()</code>, etc.</li>
<li>Reading dimensions: <code>ele.midpoint()</code>, <code>ele.boundingBox()</code>, etc.</li>
<li>Animation: <code>ele.animation()</code>, <code>cy.animate()</code>, etc.</li>
<li>And so on…</li>
</ul>
</li>
</ul>
<p>A batch should correspond to a single visual operation.  Usually a batch should contain calls only to the following functions:</p>
<ul>
<li>Modifying state: <code>eles.data()</code>, <code>eles.scratch()</code>, <code>eles.addClass()</code>, <code>eles.removeClass()</code>, etc.</li>
<li>Building collections: <code>eles.union()</code>, <code>eles.difference()</code>, <code>eles.intersection()</code>, etc.</li>
<li>Comparison: <code>eles.same()</code>, <code>eles.some()</code>, etc.</li>
<li>Iteration: <code>eles.forEach()</code>, <code>eles.empty()</code>, etc.</li>
<li>Traversal: <code>node.outgoers()</code>, <code>eles.bfs()</code>, etc.</li>
<li>Algorithms: <code>eles.dijkstra()</code>, <code>eles.degreeCentrality()</code>, etc.</li>
</ul>
<h3 id="examples">Examples</h3>
<p>Synchronous style:</p>
<pre><code class="language-js">cy.batch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  cy.$(<span class="hljs-string">'#j'</span>)
    .data(<span class="hljs-string">'weight'</span>, <span class="hljs-string">'70'</span>)
    .addClass(<span class="hljs-string">'funny'</span>)
    .removeClass(<span class="hljs-string">'serious'</span>)
  ;
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Asynchronous style:</p>
<pre><code class="language-js">cy.startBatch();

cy.$(<span class="hljs-string">'#j'</span>)
  .data(<span class="hljs-string">'weight'</span>, <span class="hljs-string">'70'</span>)
  .addClass(<span class="hljs-string">'funny'</span>)
  .removeClass(<span class="hljs-string">'serious'</span>)
;

cy.endBatch();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.mount">
								<span class="fn-name">cy.mount()</span>  <a href="#cy.mount"><span class="fa fa-bookmark"></span></a>
								<span id="core/graph-manipulation/cy.mount">&nbsp;</span><span id="core/graph-manipulation/cy.mount">&nbsp;</span><span id="cy.mount">&nbsp;</span>
							</div>



							<div class="descr"><p>Attaches the instance to the specified container for visualisation.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.mount( <span class="args-summary"><span class="comma">,&nbsp;</span>container</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">container</span>
													
													<span class="descr"><p>A HTML DOM element in which the graph should be rendered.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>If the core instance is headless prior to calling <code>cy.mount()</code>, then the instance will no longer be headless and the visualisation will be shown in the specified container.  If the core instance is non-headless prior to calling <code>cy.mount()</code>, then the visualisation is swapped from the prior container to the specified container.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.unmount">
								<span class="fn-name">cy.unmount()</span>  <a href="#cy.unmount"><span class="fa fa-bookmark"></span></a>
								<span id="core/graph-manipulation/cy.unmount">&nbsp;</span>
							</div>



							<div class="descr"><p>Remove the instance from its current container.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>This function sets the instance to be headless after unmounting from the current container.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.destroy">
								<span class="fn-name">cy.destroy()</span>  <a href="#cy.destroy"><span class="fa fa-bookmark"></span></a>
								<span id="core/graph-manipulation/cy.destroy">&nbsp;</span>
							</div>



							<div class="descr"><p>A convenience function to explicitly destroy the instance.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>The <code>cy.destroy()</code> function is not necessary but can be convenient in some cases.  It cleans up references and rendering loops such that the memory used by an instance can be garbage collected.</p>
<p>If you remove the container DOM element from the page, then the instance is cleaned up automatically.  Similarly, calling <code>cy.destroy()</code> does this cleanup and removes all the container’s children from the page.</p>
<p>When running Cytoscape.js headlessly, using <code>cy.destroy()</code> is necessary only if you’ve explicitly enabled style functionality.</p>
<p>To drop the memory used by an instance, it is necessary to drop all of your own references to that instance so it can be garbage collected.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.destroyed">
								<span class="fn-name">cy.destroyed()</span>  <a href="#cy.destroyed"><span class="fa fa-bookmark"></span></a>
								<span id="core/graph-manipulation/cy.destroyed">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the instance of Cytoscape.js has been destroyed or not.</p>
</div>


							<div class="details">
							</div>
						</div>

					<h2 id="core/data">Data <a href="#core/data"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="cy.data">
								<span class="fn-name">cy.data()</span>  <a href="#cy.data"><span class="fa fa-bookmark"></span></a>
								<span id="core/data/cy.data">&nbsp;</span><span id="core/data/cy.attr">&nbsp;</span><span id="cy.attr">&nbsp;</span><span id="core/data/cy.data">&nbsp;</span><span id="cy.data">&nbsp;</span><span id="core/data/cy.data">&nbsp;</span><span id="cy.data">&nbsp;</span><span id="core/data/cy.data">&nbsp;</span><span id="cy.data">&nbsp;</span><span id="core/data/cy.data">&nbsp;</span><span id="cy.data">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="core/data/cy.attr" class="pure-alias-name">cy.attr()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Read and write developer-defined data associated with the graph.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.data()</div>


										<div class="descr"><p>Get the entire data object.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.data( <span class="args-summary"><span class="comma">,&nbsp;</span>name</span> )</div>


										<div class="descr"><p>Get a particular data field.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">name</span>
													
													<span class="descr"><p>The name of the field to get.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.data( <span class="args-summary"><span class="comma">,&nbsp;</span>name<span class="comma">,&nbsp;</span>value</span> )</div>


										<div class="descr"><p>Set a particular data field.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">name</span>
													
													<span class="descr"><p>The name of the field to set.</p>
</span>

												</li>
												<li>
													<span class="name">value</span>
													
													<span class="descr"><p>The value to set for the field.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.data( <span class="args-summary"><span class="comma">,&nbsp;</span>obj</span> )</div>


										<div class="descr"><p>Update multiple data fields at once via an object.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">obj</span>
													
													<span class="descr"><p>The object containing name-value pairs to update data fields.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.removeData">
								<span class="fn-name">cy.removeData()</span>  <a href="#cy.removeData"><span class="fa fa-bookmark"></span></a>
								<span id="core/data/cy.removeData">&nbsp;</span><span id="core/data/cy.removeAttr">&nbsp;</span><span id="cy.removeAttr">&nbsp;</span><span id="core/data/cy.removeData">&nbsp;</span><span id="cy.removeData">&nbsp;</span><span id="core/data/cy.removeData">&nbsp;</span><span id="cy.removeData">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="core/data/cy.removeAttr" class="pure-alias-name">cy.removeAttr()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Remove developer-defined data associated with the elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.removeData()</div>


										<div class="descr"><p>Removes all mutable data fields for the elements.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.removeData( <span class="args-summary"><span class="comma">,&nbsp;</span>names</span> )</div>


										<div class="descr"><p>Removes the specified mutable data fields for the elements.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">names</span>
													
													<span class="descr"><p>A space-separated list of fields to delete.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.scratch">
								<span class="fn-name">cy.scratch()</span>  <a href="#cy.scratch"><span class="fa fa-bookmark"></span></a>
								<span id="core/data/cy.scratch">&nbsp;</span><span id="core/data/cy.scratch">&nbsp;</span><span id="cy.scratch">&nbsp;</span><span id="core/data/cy.scratch">&nbsp;</span><span id="cy.scratch">&nbsp;</span><span id="core/data/cy.scratch">&nbsp;</span><span id="cy.scratch">&nbsp;</span>
							</div>

								<div class="ext-function-note">
									<span class="fa fa-puzzle-piece important"></span> <a href="#extensions">Extension</a> function: This function is intended for use in extensions.
								</div>


							<div class="descr"><p>Set or get scratchpad data, where temporary or non-JSON data can be stored.  App-level scratchpad data should use namespaces prefixed with underscore, like <code>&#39;_foo&#39;</code>.  This is analogous to the more common <a href="#ele.scratch"><code>ele.scratch()</code></a> but for graph global data.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.scratch()</div>


										<div class="descr"><p>Get the entire scratchpad object for the core.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.scratch( <span class="args-summary"><span class="comma">,&nbsp;</span>namespace</span> )</div>


										<div class="descr"><p>Get the scratchpad at a particular namespace.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">namespace</span>
													
													<span class="descr"><p>A namespace string.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.scratch( <span class="args-summary"><span class="comma">,&nbsp;</span>namespace<span class="comma">,&nbsp;</span>value</span> )</div>


										<div class="descr"><p>Set the scratchpad at a particular namespace.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">namespace</span>
													
													<span class="descr"><p>A namespace string.</p>
</span>

												</li>
												<li>
													<span class="name">value</span>
													
													<span class="descr"><p>The value to set at the specified namespace.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.removeScratch">
								<span class="fn-name">cy.removeScratch()</span>  <a href="#cy.removeScratch"><span class="fa fa-bookmark"></span></a>
								<span id="core/data/cy.removeScratch">&nbsp;</span><span id="core/data/cy.removeScratch">&nbsp;</span><span id="cy.removeScratch">&nbsp;</span>
							</div>

								<div class="ext-function-note">
									<span class="fa fa-puzzle-piece important"></span> <a href="#extensions">Extension</a> function: This function is intended for use in extensions.
								</div>


							<div class="descr"><p>Remove scratchpad data.  You should remove scratchpad data only at your own namespaces.  This is analogous to the more common <a href="#ele.removeScratch"><code>ele.removeScratch()</code></a> but for graph global data.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.removeScratch( <span class="args-summary"><span class="comma">,&nbsp;</span>namespace</span> )</div>


										<div class="descr"><p>Remove the scratchpad data at a particular namespace.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">namespace</span>
													
													<span class="descr"><p>A namespace string.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<p>Note that <code>ele.removeScratch()</code> sets the scratchpad object for the specified namespace to <code>undefined</code>.  This allows you to use meaningful <code>null</code> values.</p>

							</div>
						</div>

					<h2 id="core/events">Events <a href="#core/events"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="cy.on">
								<span class="fn-name">cy.on()</span>  <a href="#cy.on"><span class="fa fa-bookmark"></span></a>
								<span id="core/events/cy.on">&nbsp;</span><span id="core/events/cy.bind">&nbsp;</span><span id="cy.bind">&nbsp;</span><span id="core/events/cy.listen">&nbsp;</span><span id="cy.listen">&nbsp;</span><span id="core/events/cy.addListener">&nbsp;</span><span id="cy.addListener">&nbsp;</span><span id="core/events/cy.on">&nbsp;</span><span id="cy.on">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="core/events/cy.bind" class="pure-alias-name">cy.bind()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="core/events/cy.listen" class="pure-alias-name">cy.listen()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="core/events/cy.addListener" class="pure-alias-name">cy.addListener()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Listen to events that occur on the core.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.on( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>selector]<span class="comma">,&nbsp;</span>function(event)</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A space separated list of event names.</p>
</span>

												</li>
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A selector to specify elements for which the handler runs.</p>
</span>

												</li>
												<li>
													<span class="name">function(event)</span>
													
													<span class="descr"><p>The handler function that is called when one of the specified events occurs.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#events">event</a></span>
																
																<span class="descr"><p>The event object.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Listen to events that bubble up from elements matching the specified <code>node</code> selector:</p>
<pre><code class="language-js">cy.on(<span class="hljs-string">'tap'</span>, <span class="hljs-string">'node'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">evt</span>)</span>{
  <span class="hljs-keyword">var</span> node = evt.target;
  <span class="hljs-built_in">console</span>.log( <span class="hljs-string">'tapped '</span> + node.id() );
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Listen to all tap events that the core receives:</p>
<pre><code class="language-js">cy.on(<span class="hljs-string">'tap'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>{
  <span class="hljs-comment">// target holds a reference to the originator</span>
  <span class="hljs-comment">// of the event (core or element)</span>
  <span class="hljs-keyword">var</span> evtTarget = event.target;

  <span class="hljs-keyword">if</span>( evtTarget === cy ){
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'tap on background'</span>);
  } <span class="hljs-keyword">else</span> {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'tap on some element'</span>);
  }
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.promiseOn">
								<span class="fn-name">cy.promiseOn()</span>  <a href="#cy.promiseOn"><span class="fa fa-bookmark"></span></a>
								<span id="core/events/cy.promiseOn">&nbsp;</span><span id="core/events/cy.pon">&nbsp;</span><span id="cy.pon">&nbsp;</span><span id="core/events/cy.promiseOn">&nbsp;</span><span id="cy.promiseOn">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="core/events/cy.pon" class="pure-alias-name">cy.pon()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get a promise that is resolved when the core emits the first of any of the specified events.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.promiseOn( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A space separated list of event names.</p>
</span>

												</li>
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A selector to specify elements for which the handler runs.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.pon(<span class="hljs-string">'tap'</span>).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> event </span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'tap promise fulfilled'</span>);
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.one">
								<span class="fn-name">cy.one()</span>  <a href="#cy.one"><span class="fa fa-bookmark"></span></a>
								<span id="core/events/cy.one">&nbsp;</span><span id="core/events/cy.one">&nbsp;</span><span id="cy.one">&nbsp;</span>
							</div>



							<div class="descr"><p>Listen to events that occur on the core, and run the handler only once.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.one( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>selector]<span class="comma">,&nbsp;</span>function(event)</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A space separated list of event names.</p>
</span>

												</li>
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A selector to specify elements for which the handler runs.</p>
</span>

												</li>
												<li>
													<span class="name">function(event)</span>
													
													<span class="descr"><p>The handler function that is called when one of the specified events occurs.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#events">event</a></span>
																
																<span class="descr"><p>The event object.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.one(<span class="hljs-string">'tap'</span>, <span class="hljs-string">'node'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'tap!'</span>);
});

cy.$(<span class="hljs-string">'node'</span>).eq(<span class="hljs-number">0</span>).trigger(<span class="hljs-string">'tap'</span>); <span class="hljs-comment">// tap!</span>
cy.$(<span class="hljs-string">'node'</span>).eq(<span class="hljs-number">1</span>).trigger(<span class="hljs-string">'tap'</span>); <span class="hljs-comment">// nothing b/c already tapped</span></code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.removeListener">
								<span class="fn-name">cy.removeListener()</span>  <a href="#cy.removeListener"><span class="fa fa-bookmark"></span></a>
								<span id="core/events/cy.removeListener">&nbsp;</span><span id="core/events/cy.off">&nbsp;</span><span id="cy.off">&nbsp;</span><span id="core/events/cy.unbind">&nbsp;</span><span id="cy.unbind">&nbsp;</span><span id="core/events/cy.unlisten">&nbsp;</span><span id="cy.unlisten">&nbsp;</span><span id="core/events/cy.removeListener">&nbsp;</span><span id="cy.removeListener">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="core/events/cy.off" class="pure-alias-name">cy.off()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="core/events/cy.unbind" class="pure-alias-name">cy.unbind()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="core/events/cy.unlisten" class="pure-alias-name">cy.unlisten()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Remove event handlers on the core.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.removeListener( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>selector] [<span class="comma">,&nbsp;</span>handler]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A space separated list of event names.</p>
</span>

												</li>
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>The same selector used to listen to the events.</p>
</span>

												</li>
												<li>
													<span class="name">handler</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A reference to the handler function to remove.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>For all handlers:</p>
<pre><code class="language-js">cy.on(<span class="hljs-string">'tap'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">/* ... */</span> });

<span class="hljs-comment">// remove all tap listener handlers, including the one above</span>
cy.removeListener(<span class="hljs-string">'tap'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>For a particular handler:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> handler = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'called handler'</span>);
};
cy.on(<span class="hljs-string">'tap'</span>, handler);

<span class="hljs-keyword">var</span> otherHandler = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'called other handler'</span>);
};
cy.on(<span class="hljs-string">'tap'</span>, otherHandler);

<span class="hljs-comment">// just remove handler</span>
cy.removeListener(<span class="hljs-string">'tap'</span>, handler);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.removeAllListeners">
								<span class="fn-name">cy.removeAllListeners()</span>  <a href="#cy.removeAllListeners"><span class="fa fa-bookmark"></span></a>
								<span id="core/events/cy.removeAllListeners">&nbsp;</span>
							</div>



							<div class="descr"><p>Remove all event handlers on the core.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.emit">
								<span class="fn-name">cy.emit()</span>  <a href="#cy.emit"><span class="fa fa-bookmark"></span></a>
								<span id="core/events/cy.emit">&nbsp;</span><span id="core/events/cy.trigger">&nbsp;</span><span id="cy.trigger">&nbsp;</span><span id="core/events/cy.emit">&nbsp;</span><span id="cy.emit">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="core/events/cy.trigger" class="pure-alias-name">cy.trigger()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Emit one or more events.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.emit( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>extraParams]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A list of event names to emit (either a space-separated string or an array)</p>
</span>

												</li>
												<li>
													<span class="name">extraParams</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An array of additional parameters to pass to the handler.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.on(<span class="hljs-string">'tap'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">evt, f, b</span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'tap'</span>, f, b);
});

cy.emit(<span class="hljs-string">'tap'</span>, [<span class="hljs-string">'foo'</span>, <span class="hljs-string">'bar'</span>]);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.ready">
								<span class="fn-name">cy.ready()</span>  <a href="#cy.ready"><span class="fa fa-bookmark"></span></a>
								<span id="core/events/cy.ready">&nbsp;</span><span id="core/events/cy.ready">&nbsp;</span><span id="cy.ready">&nbsp;</span>
							</div>



							<div class="descr"><p>Run a callback as soon as the graph becomes ready (i.e. intitial data loaded and initial layout completed).  If the graph is already ready, then the callback is called immediately.  If data is loaded synchronously and the layout used is discrete/synchronous/unanimated/unspecified, then you don&#39;t need <code>cy.ready()</code>.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.ready( <span class="args-summary"><span class="comma">,&nbsp;</span>function(event)</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">function(event)</span>
													
													<span class="descr"><p>The callback run as soon as the graph is ready.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#events">event</a></span>
																
																<span class="descr"><p>The <code>ready</code> event.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>

					<h2 id="core/viewport-manipulation">Viewport manipulation <a href="#core/viewport-manipulation"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="cy.container">
								<span class="fn-name">cy.container()</span>  <a href="#cy.container"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.container">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the HTML DOM element in which the graph is visualised.  A null value is returned if the instance is headless.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.center">
								<span class="fn-name">cy.center()</span>  <a href="#cy.center"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.center">&nbsp;</span><span id="core/viewport-manipulation/cy.centre">&nbsp;</span><span id="cy.centre">&nbsp;</span><span id="core/viewport-manipulation/cy.center">&nbsp;</span><span id="cy.center">&nbsp;</span><span id="core/viewport-manipulation/cy.center">&nbsp;</span><span id="cy.center">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="core/viewport-manipulation/cy.centre" class="pure-alias-name">cy.centre()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Pan the graph to the centre of a collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.center()</div>


										<div class="descr"><p>Centre on all elements in the graph.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.center( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"><p>Centre on the specified elements.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The collection to centre upon.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>If no collection is specified, then the graph is centred on all nodes and edges in the graph.</p>
<h3 id="examples">Examples</h3>
<p>Centre the graph on node <code>j</code>:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);
cy.center( j );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.fit">
								<span class="fn-name">cy.fit()</span>  <a href="#cy.fit"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.fit">&nbsp;</span><span id="core/viewport-manipulation/cy.fit">&nbsp;</span><span id="cy.fit">&nbsp;</span><span id="core/viewport-manipulation/cy.fit">&nbsp;</span><span id="cy.fit">&nbsp;</span>
							</div>



							<div class="descr"><p>Pan and zooms the graph to fit to a collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.fit()</div>


										<div class="descr"><p>Fit to all elements in the graph.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.fit( <span class="args-summary"> [<span class="comma">,&nbsp;</span>eles] [<span class="comma">,&nbsp;</span>padding]</span> )</div>


										<div class="descr"><p>Fit to the specified elements.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>The collection to fit to.</p>
</span>

												</li>
												<li>
													<span class="name">padding</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An amount of padding (in rendered pixels) to have around the graph  (default <code>0</code>).</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>If no collection is specified, then the graph is fit to all nodes and edges in the graph.</p>
<h3 id="examples">Examples</h3>
<p>Fit the graph on nodes <code>j</code> and <code>e</code>:</p>
<pre><code class="language-js">cy.fit( cy.$(<span class="hljs-string">'#j, #e'</span>) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.reset">
								<span class="fn-name">cy.reset()</span>  <a href="#cy.reset"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.reset">&nbsp;</span><span id="core/viewport-manipulation/cy.reset">&nbsp;</span><span id="cy.reset">&nbsp;</span>
							</div>



							<div class="descr"><p>Reset the graph to the default zoom level and panning position.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.reset()</div>


										<div class="descr"><p>Resets the zoom and pan.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This resets the viewport to the origin (0, 0) at zoom level 1.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js">setTimeout( <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  cy.pan({ <span class="hljs-attr">x</span>: <span class="hljs-number">50</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">-100</span> });
}, <span class="hljs-number">1000</span> );

setTimeout( <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  cy.zoom( <span class="hljs-number">2</span> );
}, <span class="hljs-number">2000</span> );

setTimeout( <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  cy.reset();
}, <span class="hljs-number">3000</span> );
</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.pan">
								<span class="fn-name">cy.pan()</span>  <a href="#cy.pan"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.pan">&nbsp;</span><span id="core/viewport-manipulation/cy.pan">&nbsp;</span><span id="cy.pan">&nbsp;</span><span id="core/viewport-manipulation/cy.pan">&nbsp;</span><span id="cy.pan">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set the panning position of the graph.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.pan()</div>


										<div class="descr"><p>Get the current panning position.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.pan( <span class="args-summary"><span class="comma">,&nbsp;</span>renderedPosition</span> )</div>


										<div class="descr"><p>Set the current panning position.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#notation/position">renderedPosition</a></span>
													
													<span class="descr"><p>The rendered position to pan the graph to.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function pans the graph viewport origin to the specified rendered pixel position.</p>
<h3 id="examples">Examples</h3>
<p>Pan the graph to (100, 100) rendered pixels.</p>
<pre><code class="language-js">cy.pan({
  <span class="hljs-attr">x</span>: <span class="hljs-number">100</span>,
  <span class="hljs-attr">y</span>: <span class="hljs-number">100</span> 
});

<span class="hljs-built_in">console</span>.log( cy.pan() ); <span class="hljs-comment">// prints { x: 100, y: 100 }</span></code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.panBy">
								<span class="fn-name">cy.panBy()</span>  <a href="#cy.panBy"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.panBy">&nbsp;</span><span id="core/viewport-manipulation/cy.panBy">&nbsp;</span><span id="cy.panBy">&nbsp;</span>
							</div>



							<div class="descr"><p>Relatively pan the graph by a specified rendered position vector.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.panBy( <span class="args-summary"><span class="comma">,&nbsp;</span>renderedPosition</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#notation/position">renderedPosition</a></span>
													
													<span class="descr"><p>The rendered position vector to pan the graph by.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function shifts the viewport relatively by the specified position in rendered pixels.  That is, specifying a shift of 100 to the right means a translation of 100 on-screen pixels to the right.</p>
<h3 id="examples">Examples</h3>
<p>Pan the graph 100 pixels to the right.</p>
<pre><code class="language-js">cy.panBy({
  <span class="hljs-attr">x</span>: <span class="hljs-number">100</span>,
  <span class="hljs-attr">y</span>: <span class="hljs-number">0</span> 
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.panningEnabled">
								<span class="fn-name">cy.panningEnabled()</span>  <a href="#cy.panningEnabled"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.panningEnabled">&nbsp;</span><span id="core/viewport-manipulation/cy.panningEnabled">&nbsp;</span><span id="cy.panningEnabled">&nbsp;</span><span id="core/viewport-manipulation/cy.panningEnabled">&nbsp;</span><span id="cy.panningEnabled">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set whether panning is enabled.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.panningEnabled()</div>


										<div class="descr"><p>Get whether panning is enabled.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.panningEnabled( <span class="args-summary"><span class="comma">,&nbsp;</span>bool</span> )</div>


										<div class="descr"><p>Set whether panning is enabled.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">bool</span>
													
													<span class="descr"><p>A truthy value enables panning; a falsey value disables it.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Enable:</p>
<pre><code class="language-js">cy.panningEnabled( <span class="hljs-literal">true</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Disable:</p>
<pre><code class="language-js">cy.panningEnabled( <span class="hljs-literal">false</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.userPanningEnabled">
								<span class="fn-name">cy.userPanningEnabled()</span>  <a href="#cy.userPanningEnabled"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.userPanningEnabled">&nbsp;</span><span id="core/viewport-manipulation/cy.userPanningEnabled">&nbsp;</span><span id="cy.userPanningEnabled">&nbsp;</span><span id="core/viewport-manipulation/cy.userPanningEnabled">&nbsp;</span><span id="cy.userPanningEnabled">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set whether panning by user events (e.g. dragging the graph background) is enabled.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.userPanningEnabled()</div>


										<div class="descr"><p>Get whether user panning is enabled.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.userPanningEnabled( <span class="args-summary"><span class="comma">,&nbsp;</span>bool</span> )</div>


										<div class="descr"><p>Set whether user panning is enabled.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">bool</span>
													
													<span class="descr"><p>A truthy value enables user panning; a falsey value disables it.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Enable:</p>
<pre><code class="language-js">cy.userPanningEnabled( <span class="hljs-literal">true</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Disable:</p>
<pre><code class="language-js">cy.userPanningEnabled( <span class="hljs-literal">false</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.zoom">
								<span class="fn-name">cy.zoom()</span>  <a href="#cy.zoom"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.zoom">&nbsp;</span><span id="core/viewport-manipulation/cy.zoom">&nbsp;</span><span id="cy.zoom">&nbsp;</span><span id="core/viewport-manipulation/cy.zoom">&nbsp;</span><span id="cy.zoom">&nbsp;</span><span id="core/viewport-manipulation/cy.zoom">&nbsp;</span><span id="cy.zoom">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set the zoom level of the graph.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.zoom()</div>


										<div class="descr"><p>Get the zoom level.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.zoom( <span class="args-summary"><span class="comma">,&nbsp;</span>level</span> )</div>


										<div class="descr"><p>Set the zoom level.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">level</span>
													
													<span class="descr"><p>The zoom level to set.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.zoom( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"><p>Set the zoom level.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"><p>The options for zooming.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name">level</span>
																
																<span class="descr"><p>The zoom level to set.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#notation/position">position</a></span>
																
																<span class="descr"><p>The position about which to zoom.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#notation/position">renderedPosition</a></span>
																
																<span class="descr"><p>The rendered position about which to zoom.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>The zoom level must be a positive number.  Zoom levels that are not numbers are ignored; zoom levels that are numbers but outside of the range of valid zoom levels are considered to be the closest, valid zoom level.</p>
<p>When zooming about a point via <code>cy.zoom( options )</code>, the options are defined as follows.</p>
<p>For zooming about a rendered position (i.e. a position on-screen):</p>
<pre><code class="language-js">cy.zoom({
  <span class="hljs-attr">level</span>: <span class="hljs-number">2.0</span>, <span class="hljs-comment">// the zoom level</span>
  renderedPosition: { <span class="hljs-attr">x</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">100</span> }
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>For zooming about a model position:</p>
<pre><code class="language-js">cy.zoom({
  <span class="hljs-attr">level</span>: <span class="hljs-number">2.0</span>, <span class="hljs-comment">// the zoom level</span>
  position: { <span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span> }
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>You can zoom about a position or a rendered position but not both.  You should specify only one of <code>options.position</code> or <code>options.renderedPosition</code>.</p>
<h3 id="examples">Examples</h3>
<p>Zoom in to factor 2</p>
<pre><code class="language-js">cy.zoom(<span class="hljs-number">2</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Zoom in to the minimum zoom factor</p>
<pre><code class="language-js">cy.zoom(<span class="hljs-number">0</span>); <span class="hljs-comment">// 0 is outside of the valid range and</span>
            <span class="hljs-comment">// its closest valid level is the min</span></code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Zoom in to the maximum zoom factor</p>
<pre><code class="language-js">cy.zoom(<span class="hljs-number">1</span>/<span class="hljs-number">0</span>); <span class="hljs-comment">// infinity is outside of the valid range and</span>
              <span class="hljs-comment">// its closest valid level is the max</span></code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Zoom about a node</p>
<pre><code class="language-js">cy.zoom({
  <span class="hljs-attr">level</span>: <span class="hljs-number">1.5</span>,
  <span class="hljs-attr">position</span>: cy.getElementById(<span class="hljs-string">'j'</span>).position()
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.zoomingEnabled">
								<span class="fn-name">cy.zoomingEnabled()</span>  <a href="#cy.zoomingEnabled"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.zoomingEnabled">&nbsp;</span><span id="core/viewport-manipulation/cy.zoomingEnabled">&nbsp;</span><span id="cy.zoomingEnabled">&nbsp;</span><span id="core/viewport-manipulation/cy.zoomingEnabled">&nbsp;</span><span id="cy.zoomingEnabled">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set whether zooming is enabled.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.zoomingEnabled()</div>


										<div class="descr"><p>Get whether zooming is enabled.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.zoomingEnabled( <span class="args-summary"><span class="comma">,&nbsp;</span>bool</span> )</div>


										<div class="descr"><p>Set whether zooming is enabled.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">bool</span>
													
													<span class="descr"><p>A truthy value enables zooming; a falsey value disables it.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Enable:</p>
<pre><code class="language-js">cy.zoomingEnabled( <span class="hljs-literal">true</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Disable:</p>
<pre><code class="language-js">cy.zoomingEnabled( <span class="hljs-literal">false</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.userZoomingEnabled">
								<span class="fn-name">cy.userZoomingEnabled()</span>  <a href="#cy.userZoomingEnabled"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.userZoomingEnabled">&nbsp;</span><span id="core/viewport-manipulation/cy.userZoomingEnabled">&nbsp;</span><span id="cy.userZoomingEnabled">&nbsp;</span><span id="core/viewport-manipulation/cy.userZoomingEnabled">&nbsp;</span><span id="cy.userZoomingEnabled">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set whether zooming by user events (e.g. mouse wheel, pinch-to-zoom) is enabled.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.userZoomingEnabled()</div>


										<div class="descr"><p>Get whether user zooming is enabled.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.userZoomingEnabled( <span class="args-summary"><span class="comma">,&nbsp;</span>bool</span> )</div>


										<div class="descr"><p>Set whether user zooming is enabled.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">bool</span>
													
													<span class="descr"><p>A truthy value enables user zooming; a falsey value disables it.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Enable:</p>
<pre><code class="language-js">cy.userZoomingEnabled( <span class="hljs-literal">true</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Disable:</p>
<pre><code class="language-js">cy.userZoomingEnabled( <span class="hljs-literal">false</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.minZoom">
								<span class="fn-name">cy.minZoom()</span>  <a href="#cy.minZoom"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.minZoom">&nbsp;</span><span id="core/viewport-manipulation/cy.minZoom">&nbsp;</span><span id="cy.minZoom">&nbsp;</span><span id="core/viewport-manipulation/cy.minZoom">&nbsp;</span><span id="cy.minZoom">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set the minimum zoom level.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.minZoom()</div>


										<div class="descr"><p>Get the minimum zoom level.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.minZoom( <span class="args-summary"><span class="comma">,&nbsp;</span>zoom</span> )</div>


										<div class="descr"><p>Set the minimum zoom level.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">zoom</span>
													
													<span class="descr"><p>The new minimum zoom level to use.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.maxZoom">
								<span class="fn-name">cy.maxZoom()</span>  <a href="#cy.maxZoom"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.maxZoom">&nbsp;</span><span id="core/viewport-manipulation/cy.maxZoom">&nbsp;</span><span id="cy.maxZoom">&nbsp;</span><span id="core/viewport-manipulation/cy.maxZoom">&nbsp;</span><span id="cy.maxZoom">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set the maximum zoom level.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.maxZoom()</div>


										<div class="descr"><p>Get the maximum zoom level.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.maxZoom( <span class="args-summary"><span class="comma">,&nbsp;</span>zoom</span> )</div>


										<div class="descr"><p>Set the maximum zoom level.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">zoom</span>
													
													<span class="descr"><p>The new maximum zoom level to use.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.viewport">
								<span class="fn-name">cy.viewport()</span>  <a href="#cy.viewport"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.viewport">&nbsp;</span><span id="core/viewport-manipulation/cy.viewport">&nbsp;</span><span id="cy.viewport">&nbsp;</span>
							</div>



							<div class="descr"><p>Set the viewport state (pan &amp; zoom) in one call.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.viewport( <span class="args-summary"><span class="comma">,&nbsp;</span>zoom<span class="comma">,&nbsp;</span>pan</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">zoom</span>
													
													<span class="descr"><p>The zoom level to set.</p>
</span>

												</li>
												<li>
													<span class="name"><a href="#notation/position">pan</a></span>
													
													<span class="descr"><p>The pan to set (a rendered position).</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.viewport({
  <span class="hljs-attr">zoom</span>: <span class="hljs-number">2</span>,
  <span class="hljs-attr">pan</span>: { <span class="hljs-attr">x</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">100</span> }
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.boxSelectionEnabled">
								<span class="fn-name">cy.boxSelectionEnabled()</span>  <a href="#cy.boxSelectionEnabled"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.boxSelectionEnabled">&nbsp;</span><span id="core/viewport-manipulation/cy.boxSelectionEnabled">&nbsp;</span><span id="cy.boxSelectionEnabled">&nbsp;</span><span id="core/viewport-manipulation/cy.boxSelectionEnabled">&nbsp;</span><span id="cy.boxSelectionEnabled">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set whether box selection is enabled.   If enabled along with panning, the user must hold down one of shift, control, alt, or command to initiate box selection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.boxSelectionEnabled()</div>


										<div class="descr"><p>Get whether box selection is enabled.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.boxSelectionEnabled( <span class="args-summary"><span class="comma">,&nbsp;</span>bool</span> )</div>


										<div class="descr"><p>Set whether box selection is enabled.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">bool</span>
													
													<span class="descr"><p>A truthy value enables box selection; a falsey value disables it.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Enable:</p>
<pre><code class="language-js">cy.boxSelectionEnabled( <span class="hljs-literal">true</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Disable:</p>
<pre><code class="language-js">cy.boxSelectionEnabled( <span class="hljs-literal">false</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.selectionType">
								<span class="fn-name">cy.selectionType()</span>  <a href="#cy.selectionType"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.selectionType">&nbsp;</span><span id="core/viewport-manipulation/cy.selectionType">&nbsp;</span><span id="cy.selectionType">&nbsp;</span><span id="core/viewport-manipulation/cy.selectionType">&nbsp;</span><span id="cy.selectionType">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set the selection type.  The <code>&#39;single&#39;</code> selection type is the default, tapping an element selects that element and deselects the previous elements.  The <code>&#39;additive&#39; selection type toggles the selection state of an element when tapped.</code></p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.selectionType()</div>


										<div class="descr"><p>Get the selection type string.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.selectionType( <span class="args-summary"><span class="comma">,&nbsp;</span>type</span> )</div>


										<div class="descr"><p>Set the selection type.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">type</span>
													
													<span class="descr"><p>The selection type string; one of <code>&#39;single&#39;</code> (default) or <code>&#39;additive&#39;</code>.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.width">
								<span class="fn-name">cy.width()</span>  <a href="#cy.width"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.width">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the on-screen width of the viewport in pixels.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.height">
								<span class="fn-name">cy.height()</span>  <a href="#cy.height"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.height">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the on-screen height of the viewport in pixels.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.extent">
								<span class="fn-name">cy.extent()</span>  <a href="#cy.extent"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.extent">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the extent of the viewport, a bounding box in model co-ordinates that lets you know what model positions are visible in the viewport.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns a plain object bounding box with format <code>{ x1, y1, x2, y2, w, h }</code>.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.autolock">
								<span class="fn-name">cy.autolock()</span>  <a href="#cy.autolock"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.autolock">&nbsp;</span><span id="core/viewport-manipulation/cy.autolock">&nbsp;</span><span id="cy.autolock">&nbsp;</span><span id="core/viewport-manipulation/cy.autolock">&nbsp;</span><span id="cy.autolock">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set whether nodes are automatically locked (i.e. if <code>true</code>, nodes are locked despite their individual state).</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.autolock()</div>


										<div class="descr"><p>Get whether autolocking is enabled.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.autolock( <span class="args-summary"><span class="comma">,&nbsp;</span>bool</span> )</div>


										<div class="descr"><p>Set whether autolocking is enabled.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">bool</span>
													
													<span class="descr"><p>A truthy value enables autolocking; a falsey value disables it.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Enable:</p>
<pre><code class="language-js">cy.autolock( <span class="hljs-literal">true</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Disable:</p>
<pre><code class="language-js">cy.autolock( <span class="hljs-literal">false</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.autoungrabify">
								<span class="fn-name">cy.autoungrabify()</span>  <a href="#cy.autoungrabify"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.autoungrabify">&nbsp;</span><span id="core/viewport-manipulation/cy.autoungrabify">&nbsp;</span><span id="cy.autoungrabify">&nbsp;</span><span id="core/viewport-manipulation/cy.autoungrabify">&nbsp;</span><span id="cy.autoungrabify">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set whether nodes are automatically ungrabified (i.e. if <code>true</code>, nodes are ungrabbale despite their individual state).</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.autoungrabify()</div>


										<div class="descr"><p>Get whether autoungrabifying is enabled.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.autoungrabify( <span class="args-summary"><span class="comma">,&nbsp;</span>bool</span> )</div>


										<div class="descr"><p>Set whether autoungrabifying is enabled.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">bool</span>
													
													<span class="descr"><p>A truthy value enables autoungrabbifying; a falsey value disables it.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Enable:</p>
<pre><code class="language-js">cy.autoungrabify( <span class="hljs-literal">true</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Disable:</p>
<pre><code class="language-js">cy.autoungrabify( <span class="hljs-literal">false</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.autounselectify">
								<span class="fn-name">cy.autounselectify()</span>  <a href="#cy.autounselectify"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.autounselectify">&nbsp;</span><span id="core/viewport-manipulation/cy.autounselectify">&nbsp;</span><span id="cy.autounselectify">&nbsp;</span><span id="core/viewport-manipulation/cy.autounselectify">&nbsp;</span><span id="cy.autounselectify">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set whether nodes are automatically unselectified (i.e. if <code>true</code>, nodes are unselectable despite their individual state).</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.autounselectify()</div>


										<div class="descr"><p>Get whether autounselectifying is enabled.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.autounselectify( <span class="args-summary"><span class="comma">,&nbsp;</span>bool</span> )</div>


										<div class="descr"><p>Set whether autounselectifying is enabled.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">bool</span>
													
													<span class="descr"><p>A truthy value enables autounselectifying; a falsey value disables it.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Enable:</p>
<pre><code class="language-js">cy.autounselectify( <span class="hljs-literal">true</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Disable:</p>
<pre><code class="language-js">cy.autounselectify( <span class="hljs-literal">false</span> );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.resize">
								<span class="fn-name">cy.resize()</span>  <a href="#cy.resize"><span class="fa fa-bookmark"></span></a>
								<span id="core/viewport-manipulation/cy.resize">&nbsp;</span><span id="core/viewport-manipulation/cy.invalidateDimensions">&nbsp;</span><span id="cy.invalidateDimensions">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="core/viewport-manipulation/cy.invalidateDimensions" class="pure-alias-name">cy.invalidateDimensions()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Force the renderer to recalculate the viewport bounds.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>If your code resizes the graph’s dimensions or position (i.e. by changing the style of the HTML DOM element that holds the graph, or by changing the DOM element’s position in the DOM tree), you will want to call <code>cy.resize()</code> to have the graph resize and redraw itself.</p>
<p>If tapping in the graph is offset rather than at the correct position, then a call to <code>cy.resize()</code> is necessary.  Tapping can also become offset if the container element is not empty; the container is expected to be empty so the visualisation can use it.</p>
<p>Cytoscape.js can not automatically monitor the bounding box of the viewport, as querying the DOM for those dimensions can be expensive.  Although <code>cy.resize()</code> is automatically called for you on the <code>window</code>‘s <code>resize</code> event, there is no <code>resize</code> or <code>style</code> event for arbitrary DOM elements.</p>

							</div>
						</div>

					<h2 id="core/animation">Animation <a href="#core/animation"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="cy.animated">
								<span class="fn-name">cy.animated()</span>  <a href="#cy.animated"><span class="fa fa-bookmark"></span></a>
								<span id="core/animation/cy.animated">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the viewport is currently being animated.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.animate">
								<span class="fn-name">cy.animate()</span>  <a href="#cy.animate"><span class="fa fa-bookmark"></span></a>
								<span id="core/animation/cy.animate">&nbsp;</span><span id="core/animation/cy.animate">&nbsp;</span><span id="cy.animate">&nbsp;</span>
							</div>



							<div class="descr"><p>Animate the viewport.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.animate( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"><p>An object containing the details of the animation.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name">zoom</span>
																
																<span class="descr"><p>A zoom level (number) or a zoom configuration object to which the graph will be animated.</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name">level</span>
																	
																	<span class="descr"><p>The zoom level to use.</p>
</span>
																</li>


																<li>
																	<span class="name"><a href="#notation/position">position</a></span>
																	
																	<span class="descr"><p>The position about which zooming occurs.  This automatically modifies the pan such that the specified model position remains at the same position in the viewport extent during zooming.</p>
</span>
																</li>


																<li>
																	<span class="name"><a href="#notation/position">renderedPosition</a></span>
																	
																	<span class="descr"><p>The rendered position about which zooming occurs, as an alternative to using the model position.  This automatically modifies the pan such that the model position, corresponding to the rendered position at the start of the animation, remains at the same position in the viewport extent during zooming.</p>
</span>
																</li>


															</ul>
															<li>
																<span class="name"><a href="#notation/position">pan</a></span>
																
																<span class="descr"><p>A panning position to which the graph will be animated.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#notation/position">panBy</a></span>
																
																<span class="descr"><p>A relative panning position to which the graph will be animated.</p>
</span>
															</li>

															<li>
																<span class="name">fit</span>
																
																<span class="descr"><p>An object containing fitting options from which the graph will be animated.</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name"><a href="#collection">eles</a></span>
																	
																	<span class="descr"><p>Elements or a selector to which the viewport will be fitted.</p>
</span>
																</li>


																<li>
																	<span class="name">padding</span>
																	
																	<span class="descr"><p>Padding to use with the fitting (default <code>0</code>).</p>
</span>
																</li>


															</ul>
															<li>
																<span class="name">center</span>
																
																<span class="descr"><p>An object containing centring options from which the graph will be animated.</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name"><a href="#collection">eles</a></span>
																	
																	<span class="descr"><p>Elements or a selector to which the viewport will be centred.</p>
</span>
																</li>


															</ul>
															<li>
																<span class="name">duration</span>
																
																<span class="descr"><p>The duration of the animation in milliseconds.</p>
</span>
															</li>

															<li>
																<span class="name">queue</span>
																
																<span class="descr"><p>A boolean indicating whether to queue the animation (default <code>true</code>).  Queued animations on the core run in order until the queue is empty.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#style/transition-animation">easing</a></span>
																
																<span class="descr"><p>A <a href="#style/transition-animation"><code>transition-timing-function</code></a> easing style string that shapes the animation progress curve.</p>
</span>
															</li>

															<li>
																<span class="name">complete</span>
																
																<span class="descr"><p>A function to call when the animation is done.</p>
</span>
															</li>

															<li>
																<span class="name">step</span>
																
																<span class="descr"><p>A function to call each time the animation steps.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Manual pan and zoom:</p>
<pre><code class="language-js">cy.animate({
  <span class="hljs-attr">pan</span>: { <span class="hljs-attr">x</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">100</span> },
  <span class="hljs-attr">zoom</span>: <span class="hljs-number">2</span>
}, {
  <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Fit to elements:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);

cy.animate({
  <span class="hljs-attr">fit</span>: {
    <span class="hljs-attr">eles</span>: j,
    <span class="hljs-attr">padding</span>: <span class="hljs-number">20</span>
  }
}, {
  <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.animation">
								<span class="fn-name">cy.animation()</span>  <a href="#cy.animation"><span class="fa fa-bookmark"></span></a>
								<span id="core/animation/cy.animation">&nbsp;</span><span id="core/animation/cy.animation">&nbsp;</span><span id="cy.animation">&nbsp;</span>
							</div>



							<div class="descr"><p>Get an <a href="#animations">animation</a> of the viewport.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.animation( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"><p>An object containing the details of the animation.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name">zoom</span>
																
																<span class="descr"><p>A zoom level (number) or a zoom configuration object to which the graph will be animated.</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name">level</span>
																	
																	<span class="descr"><p>The zoom level to use.</p>
</span>
																</li>


																<li>
																	<span class="name"><a href="#notation/position">position</a></span>
																	
																	<span class="descr"><p>The position about which zooming occurs.  This automatically modifies the pan such that the specified model position remains at the same position in the viewport extent during zooming.</p>
</span>
																</li>


																<li>
																	<span class="name"><a href="#notation/position">renderedPosition</a></span>
																	
																	<span class="descr"><p>The rendered position about which zooming occurs, as an alternative to using the model position.  This automatically modifies the pan such that the model position, corresponding to the rendered position at the start of the animation, remains at the same position in the viewport extent during zooming.</p>
</span>
																</li>


															</ul>
															<li>
																<span class="name"><a href="#notation/position">pan</a></span>
																
																<span class="descr"><p>A panning position to which the graph will be animated.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#notation/position">panBy</a></span>
																
																<span class="descr"><p>A relative panning position to which the graph will be animated.</p>
</span>
															</li>

															<li>
																<span class="name">fit</span>
																
																<span class="descr"><p>An object containing fitting options from which the graph will be animated.</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name"><a href="#collection">eles</a></span>
																	
																	<span class="descr"><p>Elements or a selector to which the viewport will be fitted.</p>
</span>
																</li>


																<li>
																	<span class="name">padding</span>
																	
																	<span class="descr"><p>Padding to use with the fitting (default <code>0</code>).</p>
</span>
																</li>


															</ul>
															<li>
																<span class="name">center</span>
																
																<span class="descr"><p>An object containing centring options from which the graph will be animated.</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name"><a href="#collection">eles</a></span>
																	
																	<span class="descr"><p>Elements or a selector to which the viewport will be centred.</p>
</span>
																</li>


															</ul>
															<li>
																<span class="name">duration</span>
																
																<span class="descr"><p>The duration of the animation in milliseconds.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#style/transition-animation">easing</a></span>
																
																<span class="descr"><p>A <a href="#style/transition-animation"><code>transition-timing-function</code></a> easing style string that shapes the animation progress curve.</p>
</span>
															</li>

															<li>
																<span class="name">complete</span>
																
																<span class="descr"><p>A function to call when the animation is done.</p>
</span>
															</li>

															<li>
																<span class="name">step</span>
																
																<span class="descr"><p>A function to call each time the animation steps.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.delay">
								<span class="fn-name">cy.delay()</span>  <a href="#cy.delay"><span class="fa fa-bookmark"></span></a>
								<span id="core/animation/cy.delay">&nbsp;</span><span id="core/animation/cy.delay">&nbsp;</span><span id="cy.delay">&nbsp;</span>
							</div>



							<div class="descr"><p>Add a delay between queued animations for the viewport.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.delay( <span class="args-summary"><span class="comma">,&nbsp;</span>duration<span class="comma">,&nbsp;</span>complete</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">duration</span>
													
													<span class="descr"><p>How long the delay should be in milliseconds.</p>
</span>

												</li>
												<li>
													<span class="name">complete</span>
													
													<span class="descr"><p>A function to call when the delay is complete.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy
  .animate({
    <span class="hljs-attr">fit</span>: { <span class="hljs-attr">eles</span>: <span class="hljs-string">'#j'</span> }
  })

  .delay(<span class="hljs-number">1000</span>)

  .animate({
    <span class="hljs-attr">fit</span>: { <span class="hljs-attr">eles</span>: <span class="hljs-string">'#e'</span> }
  })
;</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.delayAnimation">
								<span class="fn-name">cy.delayAnimation()</span>  <a href="#cy.delayAnimation"><span class="fa fa-bookmark"></span></a>
								<span id="core/animation/cy.delayAnimation">&nbsp;</span><span id="core/animation/cy.delayAnimation">&nbsp;</span><span id="cy.delayAnimation">&nbsp;</span>
							</div>



							<div class="descr"><p>Get a delay <a href="#animations">animation</a> of the viewport.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.delayAnimation( <span class="args-summary"><span class="comma">,&nbsp;</span>duration</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">duration</span>
													
													<span class="descr"><p>How long the delay should be in milliseconds.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.stop">
								<span class="fn-name">cy.stop()</span>  <a href="#cy.stop"><span class="fa fa-bookmark"></span></a>
								<span id="core/animation/cy.stop">&nbsp;</span><span id="core/animation/cy.stop">&nbsp;</span><span id="cy.stop">&nbsp;</span>
							</div>



							<div class="descr"><p>Stop all viewport animations that are currently running.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.stop( <span class="args-summary"><span class="comma">,&nbsp;</span>clearQueue<span class="comma">,&nbsp;</span>jumpToEnd</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">clearQueue</span>
													
													<span class="descr"><p>A boolean (default <code>false</code>), indicating whether the queue of animations should be emptied.</p>
</span>

												</li>
												<li>
													<span class="name">jumpToEnd</span>
													
													<span class="descr"><p>A boolean (default <code>false</code>), indicating whether the currently-running animations should jump to their ends rather than just stopping midway.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.animate({
  <span class="hljs-attr">fit</span>: { <span class="hljs-attr">eles</span>: <span class="hljs-string">'#j'</span> }
}, { <span class="hljs-attr">duration</span>: <span class="hljs-number">2000</span> });

<span class="hljs-comment">// stop in the middle</span>
setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  cy.stop();
}, <span class="hljs-number">1000</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.clearQueue">
								<span class="fn-name">cy.clearQueue()</span>  <a href="#cy.clearQueue"><span class="fa fa-bookmark"></span></a>
								<span id="core/animation/cy.clearQueue">&nbsp;</span>
							</div>



							<div class="descr"><p>Remove all queued animations for the viewport.</p>
</div>


							<div class="details">
							</div>
						</div>

					<h2 id="core/layout">Layout <a href="#core/layout"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="cy.layout">
								<span class="fn-name">cy.layout()</span>  <a href="#cy.layout"><span class="fa fa-bookmark"></span></a>
								<span id="core/layout/cy.layout">&nbsp;</span><span id="core/layout/cy.createLayout">&nbsp;</span><span id="cy.createLayout">&nbsp;</span><span id="core/layout/cy.makeLayout">&nbsp;</span><span id="cy.makeLayout">&nbsp;</span><span id="core/layout/cy.layout">&nbsp;</span><span id="cy.layout">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="core/layout/cy.createLayout" class="pure-alias-name">cy.createLayout()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="core/layout/cy.makeLayout" class="pure-alias-name">cy.makeLayout()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get a new layout, which can be used to algorithmically position the nodes in the graph.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.layout( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"><p>The layout options.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<p>You must specify <code>options.name</code> with the name of the layout you wish to use.</p>
<p>This function creates and returns a <a href="#layouts">layout object</a>.  You may want to keep a reference to the layout for more advanced usecases, such as running multiple layouts simultaneously.</p>
<p><span class="important-indicator"></span> Note that you must call <a href="#layouts/layout-manipulation/layout.run"><code>layout.run()</code></a> in order for it to affect the graph.</p>
<p>The layout includes all elements in the graph at the moment <code>cy.layout()</code> is called, as <code>cy.layout()</code> is equivalent to <code>cy.elements().layout()</code>.  You can use <a href="#collection/layout/eles.layout"><code>eles.layout()</code></a> to run a layout on a subset of the elements in the graph.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> layout = cy.layout({
  <span class="hljs-attr">name</span>: <span class="hljs-string">'random'</span>
});

layout.run();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="core/style">Style <a href="#core/style"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="cy.style">
								<span class="fn-name">cy.style()</span>  <a href="#cy.style"><span class="fa fa-bookmark"></span></a>
								<span id="core/style/cy.style">&nbsp;</span><span id="core/style/cy.style">&nbsp;</span><span id="cy.style">&nbsp;</span><span id="core/style/cy.style">&nbsp;</span><span id="cy.style">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the entry point to modify the visual style of the graph after initialisation.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.style()</div>


										<div class="descr"><p>Get the current style object.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.style( <span class="args-summary"><span class="comma">,&nbsp;</span>stylesheet</span> )</div>


										<div class="descr"><p>Assign a new stylesheet to replace the existing one.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#style">stylesheet</a></span>
													
													<span class="descr"><p>Either a <code>cytoscape.stylesheet()</code> object, a string stylesheet, or a JSON stylesheet (the same formats accepted for <a href="#style"><code>options.style</code></a> at initialisation).</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>You can use this function to gain access to the visual style (stylesheet) after initialisation.  This is useful if you need to change the entire stylesheet at runtime.</p>
<p>Set a new style by reference:</p>
<pre><code class="language-js"><span class="hljs-comment">// here a string stylesheet is used, but you could also use json or a cytoscape.stylesheet() object</span>
<span class="hljs-keyword">var</span> stringStylesheet = <span class="hljs-string">'node { background-color: cyan; }'</span>;
cy.style( stringStylesheet );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Set an entirely new style to the graph, specifying <a href="#selectors">selectors</a> and <a href="#style">style properties</a> via function calls:</p>
<pre><code class="language-js">cy.style()
  .resetToDefault() <span class="hljs-comment">// start a fresh default stylesheet</span>

  <span class="hljs-comment">// and then define new styles</span>
  .selector(<span class="hljs-string">'node'</span>)
      .style(<span class="hljs-string">'background-color'</span>, <span class="hljs-string">'magenta'</span>)

  <span class="hljs-comment">// ...</span>

  .update() <span class="hljs-comment">// indicate the end of your new stylesheet so that it can be updated on elements</span>
;</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Set a completely new stylesheet (without the default stylesheet as a base):</p>
<pre><code class="language-js">cy.style()
  .clear() <span class="hljs-comment">// start a fresh stylesheet without even the default stylesheet</span>

  <span class="hljs-comment">// define all basic styles for node</span>
  .selector(<span class="hljs-string">'node'</span>)
    .style(<span class="hljs-string">'background-color'</span>, <span class="hljs-string">'magenta'</span>)

  <span class="hljs-comment">// define all basic styles for edge</span>
  .selector(<span class="hljs-string">'edge'</span>)
      .style({
      <span class="hljs-string">'width'</span>: <span class="hljs-number">3</span>,
      <span class="hljs-string">'line-color'</span>: <span class="hljs-string">'yellow'</span>
    })

  <span class="hljs-comment">// ...</span>

  .update() <span class="hljs-comment">// indicate the end of your new stylesheet so that it can be updated on elements</span>
;</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Add to the existing stylesheet:</p>
<pre><code class="language-js">cy.style()
  .selector(<span class="hljs-string">'node'</span>)
    .style({
      <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'yellow'</span>
    })

  .update() <span class="hljs-comment">// indicate the end of your new stylesheet so that it can be updated on elements</span>
;</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Set the style from plain JSON:</p>
<pre><code class="language-js">cy.style()
  .fromJson([
    {
      <span class="hljs-attr">selector</span>: <span class="hljs-string">'node'</span>,
      <span class="hljs-attr">style</span>: {
        <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'red'</span>
      }
    }

    <span class="hljs-comment">// , ...</span>
  ])

  .update() <span class="hljs-comment">// indicate the end of your new stylesheet so that it can be updated on elements</span>
;</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Set the style from a style string (that you would probably pull from a file on your server):</p>
<pre><code class="language-js">cy.style()
  .fromString(<span class="hljs-string">'node { background-color: blue; }'</span>)

  .update() <span class="hljs-comment">// update the elements in the graph with the new style</span>
;</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Get the current style as JSON:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> styleJson = cy.style().json();
<span class="hljs-keyword">var</span> serializedJson = <span class="hljs-built_in">JSON</span>.stringify( styleJson );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="core/export">Export <a href="#core/export"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="cy.png">
								<span class="fn-name">cy.png()</span>  <a href="#cy.png"><span class="fa fa-bookmark"></span></a>
								<span id="core/export/cy.png">&nbsp;</span><span id="core/export/cy.png">&nbsp;</span><span id="cy.png">&nbsp;</span>
							</div>



							<div class="descr"><p>Export the current graph view as a PNG image.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.png( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"><p>The export options.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name">output</span>
																
																<span class="descr"><p>Whether the output should be <code>&#39;base64uri&#39;</code> (default), <code>&#39;base64&#39;</code>, <code>&#39;blob&#39;</code>, or <code>&#39;blob-promise&#39;</code> (a promise that resolves to the blob is returned).</p>
</span>
															</li>

															<li>
																<span class="name">bg</span>
																
																<span class="descr"><p>The background colour of the image (transparent by default).</p>
</span>
															</li>

															<li>
																<span class="name">full</span>
																
																<span class="descr"><p>Whether to export the current viewport view (<code>false</code>, default) or the entire graph (<code>true</code>).</p>
</span>
															</li>

															<li>
																<span class="name">scale</span>
																
																<span class="descr"><p>This value specifies a positive number that scales the size of the resultant image.</p>
</span>
															</li>

															<li>
																<span class="name">maxWidth</span>
																
																<span class="descr"><p>Specifies the scale automatically in combination with <code>maxHeight</code> such that the resultant image is no wider than <code>maxWidth</code>.</p>
</span>
															</li>

															<li>
																<span class="name">maxHeight</span>
																
																<span class="descr"><p>Specifies the scale automatically in combination with <code>maxWidth</code> such that the resultant image is no taller than <code>maxHeight</code>.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function exports the currently-rendered graph as an image, so you may not call this function on a headless instance.  By default, the export takes into account the current screen pixel density so that the image is of the same quality of the screen.  If the <code>maxWidth</code> or <code>maxHeight</code> options are specified, then the screen pixel density is ignored so that the image can fit in the specified dimensions.</p>
<p><span class="important-indicator"></span> Specifying <code>output:&#39;blob-promise&#39;</code> is the only way to make this function non-blocking.  Other outputs may hang the browser until finished, especially for a large image.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> png64 = cy.png();

<span class="hljs-comment">// put the png data in an img tag</span>
<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#png-eg'</span>).setAttribute(<span class="hljs-string">'src'</span>, png64);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Example image tag:</p>
<p><img id="png-eg"></img></p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.jpg">
								<span class="fn-name">cy.jpg()</span>  <a href="#cy.jpg"><span class="fa fa-bookmark"></span></a>
								<span id="core/export/cy.jpg">&nbsp;</span><span id="core/export/cy.jpeg">&nbsp;</span><span id="cy.jpeg">&nbsp;</span><span id="core/export/cy.jpg">&nbsp;</span><span id="cy.jpg">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="core/export/cy.jpeg" class="pure-alias-name">cy.jpeg()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Export the current graph view as a JPG image.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.jpg( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"><p>The export options.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name">output</span>
																
																<span class="descr"><p>Whether the output should be <code>&#39;base64uri&#39;</code> (default), <code>&#39;base64&#39;</code>, <code>&#39;blob&#39;</code>, or <code>&#39;blob-promise&#39;</code> (a promise that resolves to the blob is returned).</p>
</span>
															</li>

															<li>
																<span class="name">bg</span>
																
																<span class="descr"><p>The background colour of the image (white by default).</p>
</span>
															</li>

															<li>
																<span class="name">full</span>
																
																<span class="descr"><p>Whether to export the current viewport view (<code>false</code>, default) or the entire graph (<code>true</code>).</p>
</span>
															</li>

															<li>
																<span class="name">scale</span>
																
																<span class="descr"><p>This value specifies a positive number that scales the size of the resultant image.</p>
</span>
															</li>

															<li>
																<span class="name">maxWidth</span>
																
																<span class="descr"><p>Specifies the scale automatically in combination with <code>maxHeight</code> such that the resultant image is no wider than <code>maxWidth</code>.</p>
</span>
															</li>

															<li>
																<span class="name">maxHeight</span>
																
																<span class="descr"><p>Specifies the scale automatically in combination with <code>maxWidth</code> such that the resultant image is no taller than <code>maxHeight</code>.</p>
</span>
															</li>

															<li>
																<span class="name">quality</span>
																
																<span class="descr"><p>Specifies the quality of the image from <code>0</code> (low quality, low filesize) to <code>1</code> (high quality, high filesize).  If not set, the browser&#39;s default quality value is used.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function exports the currently-rendered graph as an image, so you may not call this function on a headless instance.  By default, the export takes into account the current screen pixel density so that the image is of the same quality of the screen.  If the <code>maxWidth</code> or <code>maxHeight</code> options are specified, then the screen pixel density is ignored so that the image can fit in the specified dimensions.</p>
<p><span class="important-indicator"></span> Specifying <code>output:&#39;blob-promise&#39;</code> is the only way to make this function non-blocking.  Other outputs may hang the browser until finished, especially for a large image.</p>
<p><span class="important-indicator"></span> The JPEG format is lossy, whereas PNG is not.  This means that <code>cy.jpg()</code> is useful for cases where filesize is more important than pixel-perfect images.  JPEG compression will make your images (especially edge lines) blurry and distorted.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> jpg64 = cy.jpg();

<span class="hljs-comment">// put the png data in an img tag</span>
<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#jpg-eg'</span>).setAttribute(<span class="hljs-string">'src'</span>, jpg64);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Example image tag:</p>
<p><img id="jpg-eg"></img></p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="cy.json">
								<span class="fn-name">cy.json()</span>  <a href="#cy.json"><span class="fa fa-bookmark"></span></a>
								<span id="core/export/cy.json">&nbsp;</span><span id="core/export/cy.json">&nbsp;</span><span id="cy.json">&nbsp;</span><span id="core/export/cy.json">&nbsp;</span><span id="cy.json">&nbsp;</span>
							</div>



							<div class="descr"><p>Import or export the graph in the same JSON format used at initialisation.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">cy.json( <span class="args-summary"><span class="comma">,&nbsp;</span>flatEles</span> )</div>


										<div class="descr"><p>Export the graph as JSON.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">flatEles</span>
													
													<span class="descr"><p>Whether the resulant JSON should include the elements as a flat array (<code>true</code>) or as two keyed arrays by group (<code>false</code>, default).</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">cy.json( <span class="args-summary"><span class="comma">,&nbsp;</span>cyJson</span> )</div>


										<div class="descr"><p>Import the graph as JSON, updating only the fields specified.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#core/initialisation">cyJson</a></span>
													
													<span class="descr"><p>The object with the fields corresponding to the states that should be changed.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns the same object that is used for <a href="#core/initialisation">initialisation</a>.  You will find this function useful if you would like to save the entire state of the graph, either for your own purposes or for future restoration of that graph state.</p>
<p>This function can also be used to set graph state as in <code>cy.json( cyJson )</code>, where each field in <code>cyJson</code> is to be mutated in the graph.  For each field defined in <code>cyJson</code>, <code>cy</code> is updated to match with the corresponding events emitted.   This allows for declarative changes on the graph to be made.</p>
<p>For <code>cy.json( cyJson )</code>, all mutable <a href="#core/initialisation">initialisation options</a> are supported.</p>
<p>When setting <code>cy.json({ elements: ... })</code></p>
<ul>
<li>the included elements are mutated as specified (i.e. as they would be by <a href="#collection/data/ele.json"><code>ele.json( eleJson )</code></a>),</li>
<li>the included elements not in the graph are added, and</li>
<li>the not included elements are removed from the graph.</li>
</ul>
<p>When setting <code>cy.json({ style: ... })</code></p>
<ul>
<li>the entire stylesheet is replaced, and</li>
<li>the style is recalculated for each element.</li>
</ul>
<p>Updating the stylesheet is expensive.  Similarly, it can potentially be expensive to update the existing elements for large graphs — as each element needs to be considered, and potentially each field per element.  For elements, a much cheaper option is to selectively call <code>ele.json(...)</code> with only the fields that need to be updated.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-built_in">console</span>.log( cy.json() );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><pre><code class="language-js">cy.json({
  <span class="hljs-attr">zoom</span>: <span class="hljs-number">2</span>
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

				<h1 id="collection">Collection <a href="#collection"><span class="fa fa-bookmark"></span></a></h1>

					<p>A collection contains a set of nodes and edges.  Calling a function applies the function to all elements in the collection.  When reading values from a collection, <a href="#collection/data/eles.data"><code>eles.data()</code></a> for example, the value of the first element in the collection is returned.  For example:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> weight = cy.nodes().data(<span class="hljs-string">"weight"</span>);

<span class="hljs-built_in">console</span>.log( cy.nodes()[<span class="hljs-number">0</span>].data(<span class="hljs-string">"weight"</span>) + <span class="hljs-string">' == '</span> + weight ); <span class="hljs-comment">// weight is the first ele's weight</span></code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>You can ensure that you’re reading from the element you want by using a <a href="#selectors">selector</a> to narrow down the collection to one element (i.e. <code>eles.size() === 1</code>) or the <a href="#collection/iteration/eles.eq"><code>eles.eq()</code></a> function.</p>
<p>Also note that collections are iterable for modern browsers which support the <a href="https://exploringjs.com/es6/ch_iteration.html">iteration protocols</a>. This enables the use of features such as the spread operator, for-of loops, and destructuring.</p>



					<h2 id="collection/graph-manipulation">Graph manipulation <a href="#collection/graph-manipulation"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="ele.cy">
								<span class="fn-name">ele.cy()</span>  <a href="#ele.cy"><span class="fa fa-bookmark"></span></a>
								<span id="collection/graph-manipulation/ele.cy">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the core instance that owns the element.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.remove">
								<span class="fn-name">eles.remove()</span>  <a href="#eles.remove"><span class="fa fa-bookmark"></span></a>
								<span id="collection/graph-manipulation/eles.remove">&nbsp;</span>
							</div>



							<div class="descr"><p>Remove the elements from the graph, and return all elements removed by this call.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>This function removes the calling elements from the graph.  The elements are not deleted — they still exist in memory — but they are no longer in the graph.</p>
<p><span class="important-indicator"></span> A removed element just exists to be added back to its originating core instance or some other core instance.  It does not make sense to call functions, other than <code>eles.restore()</code>, on a removed element.  A removed element merely exists in this limbo state so you can later add it back to some core instance.</p>
<h3 id="examples">Examples</h3>
<p>Remove selected elements:</p>
<pre><code class="language-js">cy.$(<span class="hljs-string">':selected'</span>).remove();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.removed">
								<span class="fn-name">ele.removed()</span>  <a href="#ele.removed"><span class="fa fa-bookmark"></span></a>
								<span id="collection/graph-manipulation/ele.removed">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the element has been removed from the graph.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.inside">
								<span class="fn-name">ele.inside()</span>  <a href="#ele.inside"><span class="fa fa-bookmark"></span></a>
								<span id="collection/graph-manipulation/ele.inside">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the element is inside the graph (i.e. not removed).</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.restore">
								<span class="fn-name">eles.restore()</span>  <a href="#eles.restore"><span class="fa fa-bookmark"></span></a>
								<span id="collection/graph-manipulation/eles.restore">&nbsp;</span>
							</div>



							<div class="descr"><p>Put removed elements back into the graph.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>This function puts back elements in the graph that have been removed.  It will do nothing if the elements are already in the graph.</p>
<p>An element can not be restored if its ID is the same as an element already in the graph.  You should specify an alternative ID for the element you want to add in that case.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-comment">// remove selected elements</span>
<span class="hljs-keyword">var</span> eles = cy.$(<span class="hljs-string">':selected'</span>).remove();

<span class="hljs-comment">// ... then some time later put them back</span>
eles.restore();
</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.clone">
								<span class="fn-name">eles.clone()</span>  <a href="#eles.clone"><span class="fa fa-bookmark"></span></a>
								<span id="collection/graph-manipulation/eles.clone">&nbsp;</span><span id="collection/graph-manipulation/eles.copy">&nbsp;</span><span id="eles.copy">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/graph-manipulation/eles.copy" class="pure-alias-name">eles.copy()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get a new collection containing clones (i.e. copies) of the elements in the calling collection.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.move">
								<span class="fn-name">eles.move()</span> et al <a href="#eles.move"><span class="fa fa-bookmark"></span></a>
								<span id="collection/graph-manipulation/eles.move">&nbsp;</span><span id="collection/graph-manipulation/edges.move">&nbsp;</span><span id="edges.move">&nbsp;</span><span id="collection/graph-manipulation/nodes.move">&nbsp;</span><span id="nodes.move">&nbsp;</span>
							</div>



							<div class="descr"><p>Move the elements with respect to graph topology (i.e. new <code>source</code>, <code>target</code>, or <code>parent</code>).</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">edges.move( <span class="args-summary"><span class="comma">,&nbsp;</span>location</span> )</div>


										<div class="descr"><p>Change the source, target, or both source and target.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">location</span>
													
													<span class="descr"><p>Where the edges are moved.  You can specify a new source, a new target, or both.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name">source</span>
																
																<span class="descr"><p>The ID of the new source node.</p>
</span>
															</li>

															<li>
																<span class="name">target</span>
																
																<span class="descr"><p>The ID of the new target node.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">nodes.move( <span class="args-summary"><span class="comma">,&nbsp;</span>location</span> )</div>


										<div class="descr"><p>Change the parent.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">location</span>
													
													<span class="descr"><p>Where the nodes are moved.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name">parent</span>
																
																<span class="descr"><p>The ID of the new parent node (use <code>null</code> for no parent).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function moves the elements in-place, so no <code>remove</code> or <code>add</code> events are generated.  A <code>move</code> event is emitted on the moved elements.</p>
<h3 id="examples">Examples</h3>
<p>Move an edge:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> ej = cy.$(<span class="hljs-string">'#ej'</span>);

ej = ej.move({
  <span class="hljs-attr">target</span>: <span class="hljs-string">'g'</span>
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="collection/events">Events <a href="#collection/events"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="eles.on">
								<span class="fn-name">eles.on()</span>  <a href="#eles.on"><span class="fa fa-bookmark"></span></a>
								<span id="collection/events/eles.on">&nbsp;</span><span id="collection/events/eles.bind">&nbsp;</span><span id="eles.bind">&nbsp;</span><span id="collection/events/eles.listen">&nbsp;</span><span id="eles.listen">&nbsp;</span><span id="collection/events/eles.addListener">&nbsp;</span><span id="eles.addListener">&nbsp;</span><span id="collection/events/eles.on">&nbsp;</span><span id="eles.on">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/events/eles.bind" class="pure-alias-name">eles.bind()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/events/eles.listen" class="pure-alias-name">eles.listen()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/events/eles.addListener" class="pure-alias-name">eles.addListener()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Listen to events that occur on the elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.on( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>selector]<span class="comma">,&nbsp;</span>function(event)</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A space separated list of event names.</p>
</span>

												</li>
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A delegate selector to specify child elements for which the handler runs.</p>
</span>

												</li>
												<li>
													<span class="name">function(event)</span>
													
													<span class="descr"><p>The handler function that is called when one of the specified events occurs.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#events">event</a></span>
																
																<span class="descr"><p>The event object.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).on(<span class="hljs-string">'tap'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">evt</span>)</span>{
  <span class="hljs-built_in">console</span>.log( <span class="hljs-string">'tap '</span> + evt.target.id() );
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.promiseOn">
								<span class="fn-name">eles.promiseOn()</span>  <a href="#eles.promiseOn"><span class="fa fa-bookmark"></span></a>
								<span id="collection/events/eles.promiseOn">&nbsp;</span><span id="collection/events/eles.pon">&nbsp;</span><span id="eles.pon">&nbsp;</span><span id="collection/events/eles.promiseOn">&nbsp;</span><span id="eles.promiseOn">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/events/eles.pon" class="pure-alias-name">eles.pon()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get a promise that is resolved the first time any of the elements emit any of the specified events.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.promiseOn( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A space separated list of event names.</p>
</span>

												</li>
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A selector to specify elements for which the handler is emitted.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).pon(<span class="hljs-string">'tap'</span>).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> event </span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'tap promise fulfilled'</span>);
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.one">
								<span class="fn-name">eles.one()</span>  <a href="#eles.one"><span class="fa fa-bookmark"></span></a>
								<span id="collection/events/eles.one">&nbsp;</span><span id="collection/events/eles.one">&nbsp;</span><span id="eles.one">&nbsp;</span>
							</div>



							<div class="descr"><p>Add a listener that is called once per event per element.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.one( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>selector]<span class="comma">,&nbsp;</span>function(event)</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A space separated list of event names.</p>
</span>

												</li>
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A delegate selector to specify child elements for which the handler runs.</p>
</span>

												</li>
												<li>
													<span class="name">function(event)</span>
													
													<span class="descr"><p>The handler function that is called when one of the specified events occurs.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#events">event</a></span>
																
																<span class="descr"><p>The event object.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>For each event specified to this function, the handler function is triggered once per element.  This is useful for one-off events that occur on each element in the calling collection once.</p>
<p>This function is a bit more complicated for compound nodes where a delegate selector has been specified:  Note that the handler is called once per element in the <em>calling collection</em>, and the handler is triggered by matching descendant elements.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'node'</span>).one(<span class="hljs-string">'tap'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{
  <span class="hljs-keyword">var</span> ele = e.target;
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'tapped '</span> + ele.id());
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.once">
								<span class="fn-name">eles.once()</span>  <a href="#eles.once"><span class="fa fa-bookmark"></span></a>
								<span id="collection/events/eles.once">&nbsp;</span><span id="collection/events/eles.once">&nbsp;</span><span id="eles.once">&nbsp;</span>
							</div>



							<div class="descr"><p>Add a listener that is called once per event per collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.once( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>selector]<span class="comma">,&nbsp;</span>function(event)</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A space separated list of event names.</p>
</span>

												</li>
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A delegate selector to specify child elements for which the handler runs.</p>
</span>

												</li>
												<li>
													<span class="name">function(event)</span>
													
													<span class="descr"><p>The handler function that is called when one of the specified events occurs.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#events">event</a></span>
																
																<span class="descr"><p>The event object.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>For each event specified to this function, the handler function is triggered once.  This is useful for one-off events that occur on just one element in the calling collection.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.nodes().once(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{
  <span class="hljs-keyword">var</span> ele = e.target;
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'clicked '</span> + ele.id());
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.removeListener">
								<span class="fn-name">eles.removeListener()</span>  <a href="#eles.removeListener"><span class="fa fa-bookmark"></span></a>
								<span id="collection/events/eles.removeListener">&nbsp;</span><span id="collection/events/eles.off">&nbsp;</span><span id="eles.off">&nbsp;</span><span id="collection/events/eles.unbind">&nbsp;</span><span id="eles.unbind">&nbsp;</span><span id="collection/events/eles.unlisten">&nbsp;</span><span id="eles.unlisten">&nbsp;</span><span id="collection/events/eles.removeListener">&nbsp;</span><span id="eles.removeListener">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/events/eles.off" class="pure-alias-name">eles.off()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/events/eles.unbind" class="pure-alias-name">eles.unbind()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/events/eles.unlisten" class="pure-alias-name">eles.unlisten()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Remove one or more listeners on the elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.removeListener( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>selector] [<span class="comma">,&nbsp;</span>handler]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A space separated list of event names.</p>
</span>

												</li>
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>The same delegate selector used to listen to the events.</p>
</span>

												</li>
												<li>
													<span class="name">handler</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A reference to the handler function to remove.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);
<span class="hljs-keyword">var</span> handler = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'tap'</span>) };

<span class="hljs-comment">// listen</span>
j.on(<span class="hljs-string">'tap'</span>, handler);

<span class="hljs-comment">// listen with some other handler</span>
j.on(<span class="hljs-string">'tap'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'some other handler'</span>);
});

j.emit(<span class="hljs-string">'tap'</span>); <span class="hljs-comment">// 'tap' &amp; 'some other handler'</span>

<span class="hljs-comment">// remove the renferenced listener handler</span>
j.removeListener(<span class="hljs-string">'tap'</span>, handler);

j.emit(<span class="hljs-string">'tap'</span>); <span class="hljs-comment">// some other handler</span>

<span class="hljs-comment">// remove all tap listener handlers (including unnamed handler)</span>
j.removeListener(<span class="hljs-string">'tap'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.removeAllListeners">
								<span class="fn-name">eles.removeAllListeners()</span>  <a href="#eles.removeAllListeners"><span class="fa fa-bookmark"></span></a>
								<span id="collection/events/eles.removeAllListeners">&nbsp;</span>
							</div>



							<div class="descr"><p>Remove all event handlers on the elements.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.emit">
								<span class="fn-name">eles.emit()</span>  <a href="#eles.emit"><span class="fa fa-bookmark"></span></a>
								<span id="collection/events/eles.emit">&nbsp;</span><span id="collection/events/eles.trigger">&nbsp;</span><span id="eles.trigger">&nbsp;</span><span id="collection/events/eles.emit">&nbsp;</span><span id="eles.emit">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/events/eles.trigger" class="pure-alias-name">eles.trigger()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Emit events on the elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.emit( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>extraParams]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A list of event names to emit (either a space-separated string or an array)</p>
</span>

												</li>
												<li>
													<span class="name">extraParams</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An array of additional parameters to pass to the handler.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);

j.on(<span class="hljs-string">'tap'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'tap!!'</span>);
});

j.emit(<span class="hljs-string">'tap'</span>); <span class="hljs-comment">// tap!!</span></code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="collection/data">Data <a href="#collection/data"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="eles.data">
								<span class="fn-name">eles.data()</span> et al <a href="#eles.data"><span class="fa fa-bookmark"></span></a>
								<span id="collection/data/eles.data">&nbsp;</span><span id="collection/data/eles.attr">&nbsp;</span><span id="eles.attr">&nbsp;</span><span id="collection/data/ele.data">&nbsp;</span><span id="ele.data">&nbsp;</span><span id="collection/data/ele.data">&nbsp;</span><span id="ele.data">&nbsp;</span><span id="collection/data/ele.data">&nbsp;</span><span id="ele.data">&nbsp;</span><span id="collection/data/ele.data">&nbsp;</span><span id="ele.data">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/data/eles.attr" class="pure-alias-name">eles.attr()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Read and write developer-defined data associated with the elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.data()</div>


										<div class="descr"><p>Get the entire data object.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.data( <span class="args-summary"><span class="comma">,&nbsp;</span>name</span> )</div>


										<div class="descr"><p>Get a particular data field for the element.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">name</span>
													
													<span class="descr"><p>The name of the field to get.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.data( <span class="args-summary"><span class="comma">,&nbsp;</span>name<span class="comma">,&nbsp;</span>value</span> )</div>


										<div class="descr"><p>Set a particular data field for the element.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">name</span>
													
													<span class="descr"><p>The name of the field to set.</p>
</span>

												</li>
												<li>
													<span class="name">value</span>
													
													<span class="descr"><p>The value to set for the field.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.data( <span class="args-summary"><span class="comma">,&nbsp;</span>obj</span> )</div>


										<div class="descr"><p>Update multiple data fields at once via an object.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">obj</span>
													
													<span class="descr"><p>The object containing name-value pairs to update data fields.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Only JSON-serialisable data may be put in <code>ele.data()</code>.  For temporary data or non-serialisable data, use <a href="#ele.scratch"><code>ele.scratch()</code></a>.</p>
<p>The following fields are normally immutable:</p>
<ul>
<li><code>id</code> : The <code>id</code> field is used to uniquely identify an element in the graph.</li>
<li><code>source</code> &amp; <code>target</code> : These fields define an edge’s relationship to nodes, and this relationship can not be changed after creation.</li>
<li><code>parent</code> : The <code>parent</code> field defines the parent (compound) node.</li>
</ul>
<p>In order to modify those fields, which alter graph topology, you must use <a href="#ele.move"><code>ele.move()</code></a>.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);

<span class="hljs-comment">// set the weight field in data</span>
j.data(<span class="hljs-string">'weight'</span>, <span class="hljs-number">60</span>);

<span class="hljs-comment">// set several fields at once</span>
j.data({
  <span class="hljs-attr">name</span>: <span class="hljs-string">'Jerry Jerry Dingleberry'</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">176</span>
});

<span class="hljs-keyword">var</span> weight = j.data(<span class="hljs-string">'weight'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.removeData">
								<span class="fn-name">eles.removeData()</span>  <a href="#eles.removeData"><span class="fa fa-bookmark"></span></a>
								<span id="collection/data/eles.removeData">&nbsp;</span><span id="collection/data/eles.removeAttr">&nbsp;</span><span id="eles.removeAttr">&nbsp;</span><span id="collection/data/eles.removeData">&nbsp;</span><span id="eles.removeData">&nbsp;</span><span id="collection/data/eles.removeData">&nbsp;</span><span id="eles.removeData">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/data/eles.removeAttr" class="pure-alias-name">eles.removeAttr()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Remove developer-defined data associated with the elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.removeData()</div>


										<div class="descr"><p>Removes all mutable data fields for the elements.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.removeData( <span class="args-summary"><span class="comma">,&nbsp;</span>names</span> )</div>


										<div class="descr"><p>Removes the specified mutable data fields for the elements.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">names</span>
													
													<span class="descr"><p>A space-separated list of fields to delete.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Using <code>ele.removeData()</code> sets the specified fields to <code>undefined</code>.  This allows you to use a meaningful <code>null</code> value in your element data.</p>
<p>The following data fields are normally immutable, and so they can not be removed:</p>
<ul>
<li><code>id</code> : The <code>id</code> field is used to uniquely identify an element in the graph.</li>
<li><code>source</code> &amp; <code>target</code> : These fields define an edge’s relationship to nodes, and this relationship can not be changed after creation.</li>
<li><code>parent</code> : The <code>parent</code> field defines the parent (compound) node.</li>
</ul>
<p>To modify the topology of the graph without adding or removing elements, you must use <a href="#ele.move"><code>ele.move()</code></a>.  Even so, only <code>parent</code> may be removed by <code>ele.move()</code>.  An edge always requires a valid source and target.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.scratch">
								<span class="fn-name">ele.scratch()</span>  <a href="#ele.scratch"><span class="fa fa-bookmark"></span></a>
								<span id="collection/data/ele.scratch">&nbsp;</span><span id="collection/data/ele.scratch">&nbsp;</span><span id="ele.scratch">&nbsp;</span><span id="collection/data/ele.scratch">&nbsp;</span><span id="ele.scratch">&nbsp;</span><span id="collection/data/ele.scratch">&nbsp;</span><span id="ele.scratch">&nbsp;</span>
							</div>

								<div class="ext-function-note">
									<span class="fa fa-puzzle-piece important"></span> <a href="#extensions">Extension</a> function: This function is intended for use in extensions.
								</div>


							<div class="descr"><p>Set or get scratchpad data, where temporary or non-JSON data can be stored.  App-level scratchpad data should use namespaces prefixed with underscore, like <code>&#39;_foo&#39;</code>.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.scratch()</div>


										<div class="descr"><p>Get the entire scratchpad object for the element.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.scratch( <span class="args-summary"><span class="comma">,&nbsp;</span>namespace</span> )</div>


										<div class="descr"><p>Get the scratchpad at a particular namespace.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">namespace</span>
													
													<span class="descr"><p>A namespace string.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.scratch( <span class="args-summary"><span class="comma">,&nbsp;</span>namespace<span class="comma">,&nbsp;</span>value</span> )</div>


										<div class="descr"><p>Set the scratchpad at a particular namespace.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">namespace</span>
													
													<span class="descr"><p>A namespace string.</p>
</span>

												</li>
												<li>
													<span class="name">value</span>
													
													<span class="descr"><p>The value to set at the specified namespace.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function is useful for storing temporary, possibly non-JSON data.  Extensions — like layouts, renderers, and so on — use <code>ele.scratch()</code> namespaced on their registered name.  For example, an extension named <code>foo</code> would use the namespace <code>&#39;foo&#39;</code>.  </p>
<p>If you want to use this function for your own app-level data, you can prefix the namespaces you use by underscore to avoid collisions with extensions.  For example, using <code>ele.scratch(&#39;_foo&#39;)</code> in your app will avoid collisions with an extension named <code>foo</code>.</p>
<p>This function is useful for associating non-JSON data to an element.  Whereas data stored via <code>ele.data()</code> is included by <code>ele.json()</code>, data stored by <code>ele.scratch()</code> is not.  This makes it easy to temporarily store unserialisable data.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);

<span class="hljs-comment">// entire scratchpad:</span>
<span class="hljs-comment">// be careful, since you could clobber over someone else's namespace or forget to use one at all!</span>
<span class="hljs-keyword">var</span> fooScratch = j.scratch()._foo = {}; 
<span class="hljs-comment">// ... now you can modify fooScratch all you want</span>

<span class="hljs-comment">// set namespaced scratchpad to ele:</span>
<span class="hljs-comment">// safer, recommended</span>
<span class="hljs-keyword">var</span> fooScratch = j.scratch(<span class="hljs-string">'_foo'</span>, {});
<span class="hljs-comment">// ... now you can modify fooScratch all you want</span>

<span class="hljs-comment">// get namespaced scratchpad from ele (assumes set before)</span>
<span class="hljs-keyword">var</span> fooScratch = j.scratch(<span class="hljs-string">'_foo'</span>);
<span class="hljs-comment">// ... now you can modify fooScratch all you want</span>
</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.removeScratch">
								<span class="fn-name">ele.removeScratch()</span>  <a href="#ele.removeScratch"><span class="fa fa-bookmark"></span></a>
								<span id="collection/data/ele.removeScratch">&nbsp;</span><span id="collection/data/ele.removeScratch">&nbsp;</span><span id="ele.removeScratch">&nbsp;</span>
							</div>

								<div class="ext-function-note">
									<span class="fa fa-puzzle-piece important"></span> <a href="#extensions">Extension</a> function: This function is intended for use in extensions.
								</div>


							<div class="descr"><p>Remove scratchpad data.  You should remove scratchpad data only at your own namespaces.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.removeScratch( <span class="args-summary"><span class="comma">,&nbsp;</span>namespace</span> )</div>


										<div class="descr"><p>Remove the scratchpad data at a particular namespace.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">namespace</span>
													
													<span class="descr"><p>A namespace string.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.id">
								<span class="fn-name">ele.id()</span>  <a href="#ele.id"><span class="fa fa-bookmark"></span></a>
								<span id="collection/data/ele.id">&nbsp;</span>
							</div>



							<div class="descr"><p>A shortcut to get the ID of an element.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.json">
								<span class="fn-name">ele.json()</span>  <a href="#ele.json"><span class="fa fa-bookmark"></span></a>
								<span id="collection/data/ele.json">&nbsp;</span><span id="collection/data/ele.json">&nbsp;</span><span id="ele.json">&nbsp;</span><span id="collection/data/ele.json">&nbsp;</span><span id="ele.json">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or mutate the element&#39;s plain JavaScript object representation.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.json()</div>


										<div class="descr"><p>Get the element&#39;s JSON.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.json( <span class="args-summary"><span class="comma">,&nbsp;</span>eleJson</span> )</div>


										<div class="descr"><p>Mutate the element&#39;s state as specified.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#notation/elements-json">eleJson</a></span>
													
													<span class="descr"><p>For each field in the object, the element&#39;s state is mutated as specified.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns the <a href="#notation/elements-json">plain JSON representation</a> of the element, the same format which is used at initialisation, in <a href="#core/graph-manipulation/cy.add"><code>cy.add()</code></a>, etc.</p>
<p>This function can also be used to set the element’s state using the <a href="#notation/elements-json">plain JSON representation</a> of the element.  Each field specified in <code>ele.json( eleJson )</code> is diffed against the element’s current state, the element is mutated accordingly, and the appropriate events are emitted.  This can be used to declaratively modify elements.</p>
<p>Note that it is much faster to simply specify the diff-patch objects to <code>ele.json()</code>, e.g. <code>ele.json({ data: { foo: &#39;bar&#39; } })</code> only updates <code>foo</code> in <code>data</code>.  This avoids the cost of diffs on unchanged fields, which is useful when making many calls to <code>ele.json()</code> for larger graphs.</p>
<h3 id="examples">Examples</h3>
<p>Print the JSON for an element:</p>
<pre><code class="language-js"><span class="hljs-built_in">console</span>.log( cy.$(<span class="hljs-string">'#j'</span>).json() );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Make an element selected:</p>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).json({ <span class="hljs-attr">selected</span>: <span class="hljs-literal">true</span> });</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.jsons">
								<span class="fn-name">eles.jsons()</span>  <a href="#eles.jsons"><span class="fa fa-bookmark"></span></a>
								<span id="collection/data/eles.jsons">&nbsp;</span>
							</div>



							<div class="descr"><p>Get an array of the plain JavaScript object representation of all elements in the collection.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns the <a href="#notation/elements-json">plain JSON representation</a> of all elements in the collection, the same format which is used at initialisation, in <a href="#core/graph-manipulation/cy.add"><code>cy.add()</code></a>, etc.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-built_in">console</span>.log( cy.elements().jsons() );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.group">
								<span class="fn-name">ele.group()</span>  <a href="#ele.group"><span class="fa fa-bookmark"></span></a>
								<span id="collection/data/ele.group">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the group string that defines the type of the element.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>The group strings are <code>&#39;nodes&#39;</code> for nodes and <code>&#39;edges&#39;</code> for edges.  In general, you should be using <code>ele.isEdge()</code> and <code>ele.isNode()</code> instead of <code>ele.group()</code>.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.isNode">
								<span class="fn-name">ele.isNode()</span>  <a href="#ele.isNode"><span class="fa fa-bookmark"></span></a>
								<span id="collection/data/ele.isNode">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the element is a node.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.isEdge">
								<span class="fn-name">ele.isEdge()</span>  <a href="#ele.isEdge"><span class="fa fa-bookmark"></span></a>
								<span id="collection/data/ele.isEdge">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the element is an edge.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="edge.isLoop">
								<span class="fn-name">edge.isLoop()</span>  <a href="#edge.isLoop"><span class="fa fa-bookmark"></span></a>
								<span id="collection/data/edge.isLoop">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the edge is a loop (i.e. same source and target).</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="edge.isSimple">
								<span class="fn-name">edge.isSimple()</span>  <a href="#edge.isSimple"><span class="fa fa-bookmark"></span></a>
								<span id="collection/data/edge.isSimple">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the edge is simple (i.e. different source and target).</p>
</div>


							<div class="details">
							</div>
						</div>

					<h2 id="collection/metadata">Metadata <a href="#collection/metadata"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="node.degree">
								<span class="fn-name">node.degree()</span> et al <a href="#node.degree"><span class="fa fa-bookmark"></span></a>
								<span id="collection/metadata/node.degree">&nbsp;</span><span id="collection/metadata/node.degree">&nbsp;</span><span id="node.degree">&nbsp;</span><span id="collection/metadata/node.indegree">&nbsp;</span><span id="node.indegree">&nbsp;</span><span id="collection/metadata/node.outdegree">&nbsp;</span><span id="node.outdegree">&nbsp;</span><span id="collection/metadata/nodes.totalDegree">&nbsp;</span><span id="nodes.totalDegree">&nbsp;</span><span id="collection/metadata/nodes.minDegree">&nbsp;</span><span id="nodes.minDegree">&nbsp;</span><span id="collection/metadata/nodes.maxDegree">&nbsp;</span><span id="nodes.maxDegree">&nbsp;</span><span id="collection/metadata/nodes.minIndegree">&nbsp;</span><span id="nodes.minIndegree">&nbsp;</span><span id="collection/metadata/nodes.maxIndegree">&nbsp;</span><span id="nodes.maxIndegree">&nbsp;</span><span id="collection/metadata/nodes.minOutdegree">&nbsp;</span><span id="nodes.minOutdegree">&nbsp;</span><span id="collection/metadata/nodes.maxOutdegree">&nbsp;</span><span id="nodes.maxOutdegree">&nbsp;</span>
							</div>



							<div class="descr"></div>

							<div class="formats">
									<div class="format">
											<div class="name">node.degree( <span class="args-summary"><span class="comma">,&nbsp;</span>includeLoops</span> )</div>


										<div class="descr"><p>Get the degree of a node.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">includeLoops</span>
													
													<span class="descr"><p>A boolean, indicating whether loops are to be included in degree calculations.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">node.indegree( <span class="args-summary"><span class="comma">,&nbsp;</span>includeLoops</span> )</div>


										<div class="descr"><p>Get the indegree of a node.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">includeLoops</span>
													
													<span class="descr"><p>A boolean, indicating whether loops are to be included in degree calculations.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">node.outdegree( <span class="args-summary"><span class="comma">,&nbsp;</span>includeLoops</span> )</div>


										<div class="descr"><p>Get the outdegree of a node.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">includeLoops</span>
													
													<span class="descr"><p>A boolean, indicating whether loops are to be included in degree calculations.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">nodes.totalDegree( <span class="args-summary"><span class="comma">,&nbsp;</span>includeLoops</span> )</div>


										<div class="descr"><p>Get the total degree of a collection of nodes.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">includeLoops</span>
													
													<span class="descr"><p>A boolean, indicating whether loops are to be included in degree calculations.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">nodes.minDegree( <span class="args-summary"><span class="comma">,&nbsp;</span>includeLoops</span> )</div>


										<div class="descr"><p>Get the minimum degree of the nodes in the collection.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">includeLoops</span>
													
													<span class="descr"><p>A boolean, indicating whether loops are to be included in degree calculations.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">nodes.maxDegree( <span class="args-summary"><span class="comma">,&nbsp;</span>includeLoops</span> )</div>


										<div class="descr"><p>Get the maximum degree of the nodes in the collection.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">includeLoops</span>
													
													<span class="descr"><p>A boolean, indicating whether loops are to be included in degree calculations.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">nodes.minIndegree( <span class="args-summary"><span class="comma">,&nbsp;</span>includeLoops</span> )</div>


										<div class="descr"><p>Get the minimum indegree of the nodes in the collection.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">includeLoops</span>
													
													<span class="descr"><p>A boolean, indicating whether loops are to be included in degree calculations.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">nodes.maxIndegree( <span class="args-summary"><span class="comma">,&nbsp;</span>includeLoops</span> )</div>


										<div class="descr"><p>Get the maximum indegree of the nodes in the collection.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">includeLoops</span>
													
													<span class="descr"><p>A boolean, indicating whether loops are to be included in degree calculations.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">nodes.minOutdegree( <span class="args-summary"><span class="comma">,&nbsp;</span>includeLoops</span> )</div>


										<div class="descr"><p>Get the minimum outdegree of the nodes in the collection.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">includeLoops</span>
													
													<span class="descr"><p>A boolean, indicating whether loops are to be included in degree calculations.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">nodes.maxOutdegree( <span class="args-summary"><span class="comma">,&nbsp;</span>includeLoops</span> )</div>


										<div class="descr"><p>Get the maximum outdegree of the nodes in the collection.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">includeLoops</span>
													
													<span class="descr"><p>A boolean, indicating whether loops are to be included in degree calculations.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p><em>Degree</em> : For a node, the degree is the number of edge connections it has.  Each time a node is referenced as <code>source</code> or <code>target</code> of an edge in the graph, that counts as an edge connection.</p>
<p><em>Indegree</em> : For a node, the indegree is the number of incoming edge connections it has.  Each time a node is referred to as <code>target</code> of an edge in the graph, that counts as an incoming edge connection.</p>
<p><em>Outdegree</em> : For a node, the outdegree is the number of outgoing edge connections it has.  Each time a node is referred to as <code>source</code> of an edge in the graph, that counts as an outgoing edge connection.</p>
<p><em>Total degree</em> : For a set of nodes, the total degree is the total number of edge connections to nodes in the set.</p>

							</div>
						</div>

					<h2 id="collection/position--dimensions">Position &amp; dimensions <a href="#collection/position--dimensions"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="node.position">
								<span class="fn-name">node.position()</span>  <a href="#node.position"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/node.position">&nbsp;</span><span id="collection/position--dimensions/node.modelPosition">&nbsp;</span><span id="node.modelPosition">&nbsp;</span><span id="collection/position--dimensions/node.point">&nbsp;</span><span id="node.point">&nbsp;</span><span id="collection/position--dimensions/node.position">&nbsp;</span><span id="node.position">&nbsp;</span><span id="collection/position--dimensions/node.position">&nbsp;</span><span id="node.position">&nbsp;</span><span id="collection/position--dimensions/node.position">&nbsp;</span><span id="node.position">&nbsp;</span><span id="collection/position--dimensions/node.position">&nbsp;</span><span id="node.position">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/position--dimensions/node.modelPosition" class="pure-alias-name">node.modelPosition()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/position--dimensions/node.point" class="pure-alias-name">node.point()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get or set the <a href="#notation/position">model position</a> of a node.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">node.position()</div>


										<div class="descr"><p>Get the entire position object.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">node.position( <span class="args-summary"><span class="comma">,&nbsp;</span>dimension</span> )</div>


										<div class="descr"><p>Get the value of a specified position dimension.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">dimension</span>
													
													<span class="descr"><p>The position dimension to get.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">node.position( <span class="args-summary"><span class="comma">,&nbsp;</span>dimension<span class="comma">,&nbsp;</span>value</span> )</div>


										<div class="descr"><p>Set the value of a specified position dimension.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">dimension</span>
													
													<span class="descr"><p>The position dimension to set.</p>
</span>

												</li>
												<li>
													<span class="name">value</span>
													
													<span class="descr"><p>The value to set to the dimension.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">node.position( <span class="args-summary"><span class="comma">,&nbsp;</span>pos</span> )</div>


										<div class="descr"><p>Set the position using name-value pairs in the specified object.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#notation/position">pos</a></span>
													
													<span class="descr"><p>An object specifying name-value pairs representing dimensions to set.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>A <a href="#notation/position">position</a> has two fields, <code>x</code> and <code>y</code>, that can take on numerical values.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-comment">// get x for j</span>
<span class="hljs-keyword">var</span> x = cy.$(<span class="hljs-string">'#j'</span>).position(<span class="hljs-string">'x'</span>);

<span class="hljs-comment">// get the whole position for e</span>
<span class="hljs-keyword">var</span> pos = cy.$(<span class="hljs-string">'#e'</span>).position();

<span class="hljs-comment">// set y for j</span>
cy.$(<span class="hljs-string">'#j'</span>).position(<span class="hljs-string">'y'</span>, <span class="hljs-number">100</span>);

<span class="hljs-comment">// set multiple</span>
cy.$(<span class="hljs-string">'#e'</span>).position({
  <span class="hljs-attr">x</span>: <span class="hljs-number">123</span>,
  <span class="hljs-attr">y</span>: <span class="hljs-number">200</span>
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.shift">
								<span class="fn-name">nodes.shift()</span>  <a href="#nodes.shift"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/nodes.shift">&nbsp;</span><span id="collection/position--dimensions/nodes.shift">&nbsp;</span><span id="nodes.shift">&nbsp;</span><span id="collection/position--dimensions/nodes.shift">&nbsp;</span><span id="nodes.shift">&nbsp;</span>
							</div>



							<div class="descr"><p>Shift the positions of the nodes by a given <a href="#notation/position">model position</a> vector.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.shift( <span class="args-summary"><span class="comma">,&nbsp;</span>dimension<span class="comma">,&nbsp;</span>value</span> )</div>


										<div class="descr"><p>Shift the nodes by one of <code>&#39;x&#39;</code> or <code>&#39;y&#39;</code>.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">dimension</span>
													
													<span class="descr"><p>The position dimension to shift.</p>
</span>

												</li>
												<li>
													<span class="name">value</span>
													
													<span class="descr"><p>The value to shift the dimension.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">nodes.shift( <span class="args-summary"><span class="comma">,&nbsp;</span>pos</span> )</div>


										<div class="descr"><p>Shift the nodes by a position vector.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#notation/position">pos</a></span>
													
													<span class="descr"><p>An object specifying name-value pairs representing dimensions to shift.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).shift({ <span class="hljs-attr">x</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">20</span> });</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.positions">
								<span class="fn-name">nodes.positions()</span>  <a href="#nodes.positions"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/nodes.positions">&nbsp;</span><span id="collection/position--dimensions/nodes.modelPositions">&nbsp;</span><span id="nodes.modelPositions">&nbsp;</span><span id="collection/position--dimensions/nodes.points">&nbsp;</span><span id="nodes.points">&nbsp;</span><span id="collection/position--dimensions/nodes.positions">&nbsp;</span><span id="nodes.positions">&nbsp;</span><span id="collection/position--dimensions/nodes.positions">&nbsp;</span><span id="nodes.positions">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/position--dimensions/nodes.modelPositions" class="pure-alias-name">nodes.modelPositions()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/position--dimensions/nodes.points" class="pure-alias-name">nodes.points()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Set the <a href="#notation/position">model positions</a> of several nodes with a function.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.positions( <span class="args-summary"><span class="comma">,&nbsp;</span>function(ele, i)</span> )</div>


										<div class="descr"><p>Set the positions via a function.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">function(ele, i)</span>
													
													<span class="descr"><p>A callback function that returns the position to set for each element.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">ele</a></span>
																
																<span class="descr"><p>The element being iterated over for which the function should return a position to set.</p>
</span>
															</li>

															<li>
																<span class="name">i</span>
																
																<span class="descr"><p>The index of the element when iterating over the elements in the collection.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">nodes.positions( <span class="args-summary"><span class="comma">,&nbsp;</span>pos</span> )</div>


										<div class="descr"><p>Set positions for all nodes based on a single position object.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#notation/position">pos</a></span>
													
													<span class="descr"><p>An object specifying name-value pairs representing dimensions to set.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.nodes().positions(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node, i </span>)</span>{
  <span class="hljs-keyword">return</span> {
    <span class="hljs-attr">x</span>: i * <span class="hljs-number">100</span>,
    <span class="hljs-attr">y</span>: <span class="hljs-number">100</span>
  };
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="node.renderedPosition">
								<span class="fn-name">node.renderedPosition()</span>  <a href="#node.renderedPosition"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/node.renderedPosition">&nbsp;</span><span id="collection/position--dimensions/node.renderedPoint">&nbsp;</span><span id="node.renderedPoint">&nbsp;</span><span id="collection/position--dimensions/node.renderedPosition">&nbsp;</span><span id="node.renderedPosition">&nbsp;</span><span id="collection/position--dimensions/node.renderedPosition">&nbsp;</span><span id="node.renderedPosition">&nbsp;</span><span id="collection/position--dimensions/node.renderedPosition">&nbsp;</span><span id="node.renderedPosition">&nbsp;</span><span id="collection/position--dimensions/node.renderedPosition">&nbsp;</span><span id="node.renderedPosition">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/position--dimensions/node.renderedPoint" class="pure-alias-name">node.renderedPoint()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get or set the <a href="#notation/position">rendered (on-screen) position</a> of a node.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">node.renderedPosition()</div>


										<div class="descr"><p>Get the entire rendered position object.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">node.renderedPosition( <span class="args-summary"><span class="comma">,&nbsp;</span>dimension</span> )</div>


										<div class="descr"><p>Get the value of a specified rendered position dimension.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">dimension</span>
													
													<span class="descr"><p>The position dimension to get.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">node.renderedPosition( <span class="args-summary"><span class="comma">,&nbsp;</span>dimension<span class="comma">,&nbsp;</span>value</span> )</div>


										<div class="descr"><p>Set the value of a specified rendered position dimension.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">dimension</span>
													
													<span class="descr"><p>The position dimension to set.</p>
</span>

												</li>
												<li>
													<span class="name">value</span>
													
													<span class="descr"><p>The value to set to the dimension.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">node.renderedPosition( <span class="args-summary"><span class="comma">,&nbsp;</span>pos</span> )</div>


										<div class="descr"><p>Set the rendered position using name-value pairs in the specified object.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#notation/position">pos</a></span>
													
													<span class="descr"><p>An object specifying name-value pairs representing dimensions to set.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="node.relativePosition">
								<span class="fn-name">node.relativePosition()</span>  <a href="#node.relativePosition"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/node.relativePosition">&nbsp;</span><span id="collection/position--dimensions/node.relativePoint">&nbsp;</span><span id="node.relativePoint">&nbsp;</span><span id="collection/position--dimensions/node.relativePosition">&nbsp;</span><span id="node.relativePosition">&nbsp;</span><span id="collection/position--dimensions/node.relativePosition">&nbsp;</span><span id="node.relativePosition">&nbsp;</span><span id="collection/position--dimensions/node.relativePosition">&nbsp;</span><span id="node.relativePosition">&nbsp;</span><span id="collection/position--dimensions/node.relativePosition">&nbsp;</span><span id="node.relativePosition">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/position--dimensions/node.relativePoint" class="pure-alias-name">node.relativePoint()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get or set the <a href="#notation/position">model position</a> of a node, relative to its compound parent.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">node.relativePosition()</div>


										<div class="descr"><p>Get the entire relative position object.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">node.relativePosition( <span class="args-summary"><span class="comma">,&nbsp;</span>dimension</span> )</div>


										<div class="descr"><p>Get the value of a specified relative position dimension.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">dimension</span>
													
													<span class="descr"><p>The position dimension to get.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">node.relativePosition( <span class="args-summary"><span class="comma">,&nbsp;</span>dimension<span class="comma">,&nbsp;</span>value</span> )</div>


										<div class="descr"><p>Set the value of a specified relative position dimension.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">dimension</span>
													
													<span class="descr"><p>The position dimension to set.</p>
</span>

												</li>
												<li>
													<span class="name">value</span>
													
													<span class="descr"><p>The value to set to the dimension.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">node.relativePosition( <span class="args-summary"><span class="comma">,&nbsp;</span>pos</span> )</div>


										<div class="descr"><p>Set the relative position using name-value pairs in the specified object.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#notation/position">pos</a></span>
													
													<span class="descr"><p>An object specifying name-value pairs representing dimensions to set.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.width">
								<span class="fn-name">ele.width()</span> et al <a href="#ele.width"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/ele.width">&nbsp;</span><span id="collection/position--dimensions/ele.width">&nbsp;</span><span id="ele.width">&nbsp;</span><span id="collection/position--dimensions/ele.outerWidth">&nbsp;</span><span id="ele.outerWidth">&nbsp;</span><span id="collection/position--dimensions/ele.renderedWidth">&nbsp;</span><span id="ele.renderedWidth">&nbsp;</span><span id="collection/position--dimensions/ele.renderedOuterWidth">&nbsp;</span><span id="ele.renderedOuterWidth">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the width of the element.  The raw width of the element is returned, independent of whether the element is visibile.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.width()</div>


										<div class="descr"><p>Get the width of the element in <a href="#notation/position">model dimensions</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.outerWidth()</div>


										<div class="descr"><p>Get the outer width of the element in <a href="#notation/position">model dimensions</a> (includes width, padding, &amp; border).</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.renderedWidth()</div>


										<div class="descr"><p>Get the width of the element in <a href="#notation/position">rendered dimensions</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.renderedOuterWidth()</div>


										<div class="descr"><p>Get the outer width of the element in <a href="#notation/position">rendered dimensions</a> (includes width, padding, &amp; border) in rendered dimensions.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.height">
								<span class="fn-name">ele.height()</span> et al <a href="#ele.height"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/ele.height">&nbsp;</span><span id="collection/position--dimensions/ele.height">&nbsp;</span><span id="ele.height">&nbsp;</span><span id="collection/position--dimensions/ele.outerHeight">&nbsp;</span><span id="ele.outerHeight">&nbsp;</span><span id="collection/position--dimensions/ele.renderedHeight">&nbsp;</span><span id="ele.renderedHeight">&nbsp;</span><span id="collection/position--dimensions/ele.renderedOuterHeight">&nbsp;</span><span id="ele.renderedOuterHeight">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the height of the element.  The raw height of the element is returned, independent of whether the element is visibile.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.height()</div>


										<div class="descr"><p>Get the height of the element in <a href="#notation/position">model dimensions</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.outerHeight()</div>


										<div class="descr"><p>Get the outer height of the element in <a href="#notation/position">model dimensions</a> (includes height, padding, &amp; border).</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.renderedHeight()</div>


										<div class="descr"><p>Get the height of the element in <a href="#notation/position">rendered dimensions</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.renderedOuterHeight()</div>


										<div class="descr"><p>Get the outer height of the element in <a href="#notation/position">rendered dimensions</a> (includes height, padding, &amp; border) in rendered dimensions.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.boundingBox">
								<span class="fn-name">eles.boundingBox()</span>  <a href="#eles.boundingBox"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/eles.boundingBox">&nbsp;</span><span id="collection/position--dimensions/eles.boundingbox">&nbsp;</span><span id="eles.boundingbox">&nbsp;</span><span id="collection/position--dimensions/eles.bb">&nbsp;</span><span id="eles.bb">&nbsp;</span><span id="collection/position--dimensions/eles.boundingBox">&nbsp;</span><span id="eles.boundingBox">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/position--dimensions/eles.boundingbox" class="pure-alias-name">eles.boundingbox()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/position--dimensions/eles.bb" class="pure-alias-name">eles.bb()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get the bounding box of the elements (in <a href="#notation/position">model co-ordinates</a>).</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.boundingBox( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"><p>Get the bounding box of the elements in <a href="#notation/position">model co-ordinates</a>.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"><p>An object containing options for the function.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name">includeNodes</span>
																
																<span class="descr"><p>A boolean indicating whether to include nodes in the bounding box (default <code>true</code>).</p>
</span>
															</li>

															<li>
																<span class="name">includeEdges</span>
																
																<span class="descr"><p>A boolean indicating whether to include edges in the bounding box (default <code>true</code>).</p>
</span>
															</li>

															<li>
																<span class="name">includeLabels</span>
																
																<span class="descr"><p>A boolean indicating whether to include labels overall in the bounding box (default <code>true</code>).  This option overrides all other label options if <code>false</code>.</p>
</span>
															</li>

															<li>
																<span class="name">includeMainLabels</span>
																
																<span class="descr"><p>A boolean indicating whether to include main (node or edge) <code>label</code>s in the bounding box (default <code>true</code>).</p>
</span>
															</li>

															<li>
																<span class="name">includeSourceLabels</span>
																
																<span class="descr"><p>A boolean indicating whether to include (edge) <code>source-label</code>s in the bounding box (default <code>true</code>).</p>
</span>
															</li>

															<li>
																<span class="name">includeTargetLabels</span>
																
																<span class="descr"><p>A boolean indicating whether to include (edge) <code>target-label</code>s in the bounding box (default <code>true</code>).</p>
</span>
															</li>

															<li>
																<span class="name">includeOverlays</span>
																
																<span class="descr"><p>A boolean indicating whether to include overlays (such as the one which appears when a node is clicked) in the bounding box (default <code>true</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns a plain object with the fields <code>x1</code>, <code>x2</code>, <code>y1</code>, <code>y2</code>, <code>w</code>, and <code>h</code> defined.</p>
<p>An element that does not take up space (e.g. <code>display: none</code>) has a bounding box of zero <code>w</code> and <code>h</code>.  The <code>x1</code>, <code>x2</code>, <code>y1</code>, and <code>y2</code> values will have no meaning for those zero-area elements.  To get the position of a <code>display: none</code> node, use <a href="#node.position"><code>node.position()</code></a> instead.</p>
<p>Note that the <code>includeOverlays</code> option necessarily includes the dimensions of the body of the element.  So using <code>includeOverlays: true</code> with <code>includeNodes: false</code>, for example, does not make sense.  The case where the <code>includeOverlays</code> option is only useful in getting the non-overlay dimensions of an element, e.g. <code>{ includeOverlays: false, includeNodes: true }</code>.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.renderedBoundingBox">
								<span class="fn-name">eles.renderedBoundingBox()</span>  <a href="#eles.renderedBoundingBox"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/eles.renderedBoundingBox">&nbsp;</span><span id="collection/position--dimensions/eles.renderedBoundingbox">&nbsp;</span><span id="eles.renderedBoundingbox">&nbsp;</span><span id="collection/position--dimensions/eles.renderedBoundingBox">&nbsp;</span><span id="eles.renderedBoundingBox">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/position--dimensions/eles.renderedBoundingbox" class="pure-alias-name">eles.renderedBoundingbox()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get the <a href="#notation/position">rendered</a> bounding box of the elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.renderedBoundingBox( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"><p>Get the bounding box of the elements in rendered co-ordinates.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"><p>An object containing options for the function.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name">includeNodes</span>
																
																<span class="descr"><p>A boolean indicating whether to include nodes in the bounding box (default <code>true</code>).</p>
</span>
															</li>

															<li>
																<span class="name">includeEdges</span>
																
																<span class="descr"><p>A boolean indicating whether to include edges in the bounding box (default <code>true</code>).</p>
</span>
															</li>

															<li>
																<span class="name">includeLabels</span>
																
																<span class="descr"><p>A boolean indicating whether to include labels overall in the bounding box (default <code>true</code>).  This option overrides all other label options if <code>false</code>.</p>
</span>
															</li>

															<li>
																<span class="name">includeMainLabels</span>
																
																<span class="descr"><p>A boolean indicating whether to include main (node or edge) <code>label</code>s in the bounding box (default <code>true</code>).</p>
</span>
															</li>

															<li>
																<span class="name">includeSourceLabels</span>
																
																<span class="descr"><p>A boolean indicating whether to include (edge) <code>source-label</code>s in the bounding box (default <code>true</code>).</p>
</span>
															</li>

															<li>
																<span class="name">includeTargetLabels</span>
																
																<span class="descr"><p>A boolean indicating whether to include (edge) <code>target-label</code>s in the bounding box (default <code>true</code>).</p>
</span>
															</li>

															<li>
																<span class="name">includeOverlays</span>
																
																<span class="descr"><p>A boolean indicating whether to include overlays (such as the one which appears when a node is clicked) in the bounding box (default <code>true</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns a plain object with the fields <code>x1</code>, <code>x2</code>, <code>y1</code>, <code>y2</code>, <code>w</code>, and <code>h</code> defined.</p>
<p>An element that does not take up space (e.g. <code>display: none</code>) has a bounding box of zero <code>w</code> and <code>h</code>.  The <code>x1</code>, <code>x2</code>, <code>y1</code>, and <code>y2</code> values will have no meaning for those zero-area elements.  To get the position of a <code>display: none</code> node, use <a href="#node.position"><code>node.position()</code></a> instead.</p>
<p>Note that the <code>includeOverlays</code> option necessarily includes the dimensions of the body of the element.  So using <code>includeOverlays: true</code> with <code>includeNodes: false</code>, for example, does not make sense.  The case where the <code>includeOverlays</code> option is only useful in getting the non-overlay dimensions of an element, e.g. <code>{ includeOverlays: false, includeNodes: true }</code>.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="node.grabbed">
								<span class="fn-name">node.grabbed()</span>  <a href="#node.grabbed"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/node.grabbed">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether a node is currently grabbed, meaning the user has hold of the node.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="node.grabbable">
								<span class="fn-name">node.grabbable()</span>  <a href="#node.grabbable"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/node.grabbable">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the user can grab a node.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.grabify">
								<span class="fn-name">nodes.grabify()</span>  <a href="#nodes.grabify"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/nodes.grabify">&nbsp;</span>
							</div>



							<div class="descr"><p>Allow the user to grab the nodes.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).grabify();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.ungrabify">
								<span class="fn-name">nodes.ungrabify()</span>  <a href="#nodes.ungrabify"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/nodes.ungrabify">&nbsp;</span>
							</div>



							<div class="descr"><p>Disallow the user to grab the nodes.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).ungrabify();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="node.locked">
								<span class="fn-name">node.locked()</span>  <a href="#node.locked"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/node.locked">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether a node is locked, meaning that its position can not be changed.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.lock">
								<span class="fn-name">nodes.lock()</span>  <a href="#nodes.lock"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/nodes.lock">&nbsp;</span>
							</div>



							<div class="descr"><p>Lock the nodes such that their positions can not be changed.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).lock();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.unlock">
								<span class="fn-name">nodes.unlock()</span>  <a href="#nodes.unlock"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/nodes.unlock">&nbsp;</span>
							</div>



							<div class="descr"><p>Unlock the nodes such that their positions can be changed.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).unlock();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.active">
								<span class="fn-name">ele.active()</span>  <a href="#ele.active"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/ele.active">&nbsp;</span>
							</div>



							<div class="descr"><p>Gets whether the element is active (e.g. on user tap, grab, etc).</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.pannable">
								<span class="fn-name">ele.pannable()</span>  <a href="#ele.pannable"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/ele.pannable">&nbsp;</span>
							</div>



							<div class="descr"><p>Gets whether the element allows passthrough panning.</p>
</div>


							<div class="details">
									<h3 id="description">Description</h3>
<p>A pannable element allows passthrough panning:  The user can pan the graph when dragging on the element.  Thus, a pannable element is necessarily ungrabbable.</p>
<p>By default, an edge is pannable and a node is not pannable.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.panify">
								<span class="fn-name">eles.panify()</span>  <a href="#eles.panify"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/eles.panify">&nbsp;</span>
							</div>



							<div class="descr"><p>Enables passthrough panning on the elements.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).panify();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.unpanify">
								<span class="fn-name">eles.unpanify()</span>  <a href="#eles.unpanify"><span class="fa fa-bookmark"></span></a>
								<span id="collection/position--dimensions/eles.unpanify">&nbsp;</span>
							</div>



							<div class="descr"><p>Disables passthrough panning on the elements.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).unpanify();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="collection/edge-points">Edge points <a href="#collection/edge-points"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="edge.controlPoints">
								<span class="fn-name">edge.controlPoints()</span> et al <a href="#edge.controlPoints"><span class="fa fa-bookmark"></span></a>
								<span id="collection/edge-points/edge.controlPoints">&nbsp;</span><span id="collection/edge-points/edge.controlPoints">&nbsp;</span><span id="edge.controlPoints">&nbsp;</span><span id="collection/edge-points/edge.renderedControlPoints">&nbsp;</span><span id="edge.renderedControlPoints">&nbsp;</span>
							</div>



							<div class="descr"><p>Get an array of control point positions for a <a href="#style/bezier-edges"><code>curve-style: bezier</code></a> or <a href="#style/unbundled-bezier-edges"><code>curve-style: unbundled-bezier</code></a> edge.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">edge.controlPoints()</div>


										<div class="descr"><p>Get the control points in <a href="#notation/position">model co-ordinates</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">edge.renderedControlPoints()</div>


										<div class="descr"><p>Get the control points in <a href="#notation/position">rendered co-ordinates</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Each bezier edge consists of one or more quadratic bezier curves.</p>
<p>A <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B%C3%A9zier_curves">quadratic bezier curve</a> is specified by three points.  Those points include the start point (P0), the centre control point (P1), and the end point (P2).  Traditionally, all three points are called “control points”, but only the centre control point (P1) is referred to as the “control point” within this documentation for brevity and clarity.  This function returns the centre control point, as other points are available by functions like <code>edge.targetEndpoint()</code>.</p>
<p>The number of returned points for each curve style is as follows:</p>
<ul>
<li><code>curve-style: bezier</code> (simple edge) : 1 point for a single quadratic bezier</li>
<li><code>curve-style: bezier</code> (loop) : 2 points for two quadratic beziers</li>
<li><code>curve-style: unbundled-bezier</code> : n points for n quadratic beziers, as the number of control points is defined by <a href="#style/unbundled-bezier-edges"><code>control-point-distances</code> and <code>control-point-weights</code></a></li>
</ul>
<p>Notes:</p>
<ul>
<li>While the control points may be specified relatively in the CSS, this function returns the absolute <a href="#notation/position">model positions</a> of the control points. The points are specified in the order of source-to-target direction.</li>
<li>This function works for bundled beziers, but it is not applicable to the middle, straight-line edge in the bundle.</li>
<li>For an unbundled bezier edge, the point that joins two successive bezier curves in the series is given by the midpoint (mean) of the two control points.  That join point specifies P2 for the first bezier, and it specifies P0 for the second bezier.</li>
</ul>

							</div>
						</div>
						<div class="function">
							<div class="name" id="edge.segmentPoints">
								<span class="fn-name">edge.segmentPoints()</span> et al <a href="#edge.segmentPoints"><span class="fa fa-bookmark"></span></a>
								<span id="collection/edge-points/edge.segmentPoints">&nbsp;</span><span id="collection/edge-points/edge.segmentPoints">&nbsp;</span><span id="edge.segmentPoints">&nbsp;</span><span id="collection/edge-points/edge.renderedSegmentPoints">&nbsp;</span><span id="edge.renderedSegmentPoints">&nbsp;</span>
							</div>



							<div class="descr"><p>Get an array of segment point positions (i.e. bend points) for a <a href="#style/segments-edges"><code>curve-style: segments</code></a> edge.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">edge.segmentPoints()</div>


										<div class="descr"><p>Get the segment points in <a href="#notation/position">model co-ordinates</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">edge.renderedSegmentPoints()</div>


										<div class="descr"><p>Get the segment points in <a href="#notation/position">rendered co-ordinates</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>While the segment points may be specified relatively in the stylesheet, this function returns the absolute <a href="#notation/position">model positions</a> of the segment points. The points are specified in the order of source-to-target direction.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="edge.sourceEndpoint">
								<span class="fn-name">edge.sourceEndpoint()</span> et al <a href="#edge.sourceEndpoint"><span class="fa fa-bookmark"></span></a>
								<span id="collection/edge-points/edge.sourceEndpoint">&nbsp;</span><span id="collection/edge-points/edge.sourceEndpoint">&nbsp;</span><span id="edge.sourceEndpoint">&nbsp;</span><span id="collection/edge-points/edge.renderedSourceEndpoint">&nbsp;</span><span id="edge.renderedSourceEndpoint">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the position of where the edge ends, towards the source node.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">edge.sourceEndpoint()</div>


										<div class="descr"><p>Get the source endpoint in <a href="#notation/position">model co-ordinates</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">edge.renderedSourceEndpoint()</div>


										<div class="descr"><p>Get the target endpoint in <a href="#notation/position">rendered co-ordinates</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="edge.targetEndpoint">
								<span class="fn-name">edge.targetEndpoint()</span> et al <a href="#edge.targetEndpoint"><span class="fa fa-bookmark"></span></a>
								<span id="collection/edge-points/edge.targetEndpoint">&nbsp;</span><span id="collection/edge-points/edge.targetEndpoint">&nbsp;</span><span id="edge.targetEndpoint">&nbsp;</span><span id="collection/edge-points/edge.renderedTargetEndpoint">&nbsp;</span><span id="edge.renderedTargetEndpoint">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the position of where the edge ends, towards the target node.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">edge.targetEndpoint()</div>


										<div class="descr"><p>Get the target endpoint in <a href="#notation/position">model co-ordinates</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">edge.renderedTargetEndpoint()</div>


										<div class="descr"><p>Get the target endpoint in <a href="#notation/position">rendered co-ordinates</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="edge.midpoint">
								<span class="fn-name">edge.midpoint()</span> et al <a href="#edge.midpoint"><span class="fa fa-bookmark"></span></a>
								<span id="collection/edge-points/edge.midpoint">&nbsp;</span><span id="collection/edge-points/edge.midpoint">&nbsp;</span><span id="edge.midpoint">&nbsp;</span><span id="collection/edge-points/edge.renderedMidpoint">&nbsp;</span><span id="edge.renderedMidpoint">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the position of the midpoint of the edge.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">edge.midpoint()</div>


										<div class="descr"><p>Get the midpoint in <a href="#notation/position">model co-ordinates</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">edge.renderedMidpoint()</div>


										<div class="descr"><p>Get the midpoint in <a href="#notation/position">rendered co-ordinates</a>.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>The midpoint is, by default, where the edge’s label is centred. It is also the position towards which mid arrows point.</p>
<p>For <a href="#style/unbundled-bezier-edges"><code>curve-style: unbundled-bezier</code></a> edges, the midpoint is the middle extremum if the number of control points is odd.  For an even number of control points, the midpoint is where the two middle-most control points meet.  This is the middle inflection point for bilaterally symmetric or skew symmetric edges, for example.</p>
<p>For <a href="#style/segments-edges"><code>curve-style: segments</code></a> edges, the midpoint is the middle segment point if the number of segment points is odd.  For an even number of segment points, the overall midpoint is the midpoint of the middle-most line segment (i.e. the mean of the middle two segment points).</p>

							</div>
						</div>

					<h2 id="collection/layout">Layout <a href="#collection/layout"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="eles.layout">
								<span class="fn-name">eles.layout()</span>  <a href="#eles.layout"><span class="fa fa-bookmark"></span></a>
								<span id="collection/layout/eles.layout">&nbsp;</span><span id="collection/layout/eles.createLayout">&nbsp;</span><span id="eles.createLayout">&nbsp;</span><span id="collection/layout/eles.makeLayout">&nbsp;</span><span id="eles.makeLayout">&nbsp;</span><span id="collection/layout/eles.layout">&nbsp;</span><span id="eles.layout">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/layout/eles.createLayout" class="pure-alias-name">eles.createLayout()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/layout/eles.makeLayout" class="pure-alias-name">eles.makeLayout()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get a new layout, which can be used to algorithmically position the nodes in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.layout( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"><p>The layout options.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<p>This function is useful for running a layout on a subset of the elements in the graph, perhaps in parallel to other layouts.</p>
<p>You must specify <code>options.name</code> with the name of the layout you wish to use.</p>
<p>This function creates and returns a <a href="#layouts">layout object</a>.  You may want to keep a reference to the layout for more advanced usecases, such as running multiple layouts simultaneously.</p>
<p><span class="important-indicator"></span> Note that you must call <a href="#layouts/layout-manipulation/layout.run"><code>layout.run()</code></a> in order for it to affect the graph.</p>
<h3 id="examples">Examples</h3>
<p>Assign random positions to all nodes:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> layout = cy.elements().layout({
  <span class="hljs-attr">name</span>: <span class="hljs-string">'random'</span>
});

layout.run();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Apply a circle layout to only the shown elements:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> layout = cy.elements().not(<span class="hljs-string">':invisible, :transparent'</span>).layout({
  <span class="hljs-attr">name</span>: <span class="hljs-string">'circle'</span>
});

layout.run();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.layoutPositions">
								<span class="fn-name">nodes.layoutPositions()</span>  <a href="#nodes.layoutPositions"><span class="fa fa-bookmark"></span></a>
								<span id="collection/layout/nodes.layoutPositions">&nbsp;</span><span id="collection/layout/nodes.layoutPositions">&nbsp;</span><span id="nodes.layoutPositions">&nbsp;</span>
							</div>

								<div class="ext-function-note">
									<span class="fa fa-puzzle-piece important"></span> <a href="#extensions">Extension</a> function: This function is intended for use in extensions.
								</div>


							<div class="descr"><p>Position the nodes for a discrete/synchronous layout.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.layoutPositions( <span class="args-summary"><span class="comma">,&nbsp;</span>layout<span class="comma">,&nbsp;</span>options<span class="comma">,&nbsp;</span>function(ele, i)</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">layout</span>
													
													<span class="descr"><p>The layout.</p>
</span>

												</li>
												<li>
													<span class="name">options</span>
													
													<span class="descr"><p>The layout options object.</p>
</span>

												</li>
												<li>
													<span class="name">function(ele, i)</span>
													
													<span class="descr"><p>A function that returns the new position for the specified node.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">ele</a></span>
																
																<span class="descr"><p>The node being iterated over for which the function should return a position to set.</p>
</span>
															</li>

															<li>
																<span class="name">i</span>
																
																<span class="descr"><p>The index of the current node while iterating over the nodes in the layout.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<p><span class="important-indicator"></span>This function is intended to be used only by layout extensions.  Your app should not call this function directly.</p>
<p>This function is called by discrete (synchronous) layouts to update the graph with new node positions.</p>
<p>A discrete layout is only responsible for calculating new node positions.  Setting these positions and performing animations, modifying the viewport, changing zoom level, etc. are handled by <code>layoutPositions()</code> — which is called by each layout at the end of its <code>run()</code> method.</p>
<p>The <code>options</code> object is passed to <code>layoutPositions()</code> when called by a layout extension and consists of many of the common properties shared between layouts:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> options = {
  <span class="hljs-attr">animate</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// whether to animate changes to the layout</span>
  animationDuration: <span class="hljs-number">500</span>, <span class="hljs-comment">// duration of animation in ms, if enabled</span>
  animationEasing: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// easing of animation, if enabled</span>
  animateFilter: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"> node, i </span>)</span>{ <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; }, <span class="hljs-comment">// a function that determines whether the node should be animated.</span>
    <span class="hljs-comment">// All nodes animated by default for `animate:true`.  Non-animated nodes are positioned immediately when the layout starts.</span>
  eles: someCollection, <span class="hljs-comment">// collection of elements involved in the layout; set by cy.layout() or eles.layout()</span>
  fit: <span class="hljs-literal">true</span>, <span class="hljs-comment">// whether to fit the viewport to the graph</span>
  padding: <span class="hljs-number">30</span>, <span class="hljs-comment">// padding to leave between graph and viewport</span>
  pan: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// pan the graph to the provided position, given as { x, y }</span>
  ready: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback for the layoutready event</span>
  stop: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback for the layoutstop event</span>
  spacingFactor: <span class="hljs-number">1</span>, <span class="hljs-comment">// a positive value which adjusts spacing between nodes (&gt;1 means greater than usual spacing)</span>
  transform: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">node, position </span>)</span>{ <span class="hljs-keyword">return</span> position; } <span class="hljs-comment">// transform a given node position. Useful for changing flow direction in discrete layouts</span>
  zoom: <span class="hljs-literal">undefined</span> <span class="hljs-comment">// zoom level as a positive number to set after animation</span>
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Note that if <code>fit</code> is true, it will override any values provided in <code>pan</code> or <code>zoom</code>.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="node.layoutDimensions">
								<span class="fn-name">node.layoutDimensions()</span>  <a href="#node.layoutDimensions"><span class="fa fa-bookmark"></span></a>
								<span id="collection/layout/node.layoutDimensions">&nbsp;</span><span id="collection/layout/node.layoutDimensions">&nbsp;</span><span id="node.layoutDimensions">&nbsp;</span>
							</div>

								<div class="ext-function-note">
									<span class="fa fa-puzzle-piece important"></span> <a href="#extensions">Extension</a> function: This function is intended for use in extensions.
								</div>


							<div class="descr"><p>Get the node width and height.  This function is intended for use in layout positioning to do overlap detection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">node.layoutDimensions( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"><p>The layout options object.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<p>This function is used to retrieve the width and height of the bounding box of a node. The way the width and height are calculated is affected by the <code>options</code> object.</p>
<p>This function returns an object containing the width and height of the calculated bounding box under the <code>w</code> and <code>h</code> keys respectively. It can be used as a direct replacement for the <code>boundingBox()</code> function assuming only <code>w</code> and <code>h</code> values are needed.</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> options = {
  <span class="hljs-attr">nodeDimensionsIncludeLabels</span>: <span class="hljs-literal">true</span> <span class="hljs-comment">// boolean which changes whether label dimensions are included when calculating node dimensions, default true</span>
};

<span class="hljs-keyword">var</span> dims = cy.nodes().first().layoutDimensions( options );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="collection/selection">Selection <a href="#collection/selection"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="ele.selected">
								<span class="fn-name">ele.selected()</span>  <a href="#ele.selected"><span class="fa fa-bookmark"></span></a>
								<span id="collection/selection/ele.selected">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the element is selected.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.select">
								<span class="fn-name">eles.select()</span>  <a href="#eles.select"><span class="fa fa-bookmark"></span></a>
								<span id="collection/selection/eles.select">&nbsp;</span>
							</div>



							<div class="descr"><p>Make the elements selected.  Elements outside the collection are not affected.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).select();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.unselect">
								<span class="fn-name">eles.unselect()</span>  <a href="#eles.unselect"><span class="fa fa-bookmark"></span></a>
								<span id="collection/selection/eles.unselect">&nbsp;</span><span id="collection/selection/eles.deselect">&nbsp;</span><span id="eles.deselect">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/selection/eles.deselect" class="pure-alias-name">eles.deselect()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Make the elements not selected. Elements outside the collection are not affected.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).unselect();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.selectable">
								<span class="fn-name">ele.selectable()</span>  <a href="#ele.selectable"><span class="fa fa-bookmark"></span></a>
								<span id="collection/selection/ele.selectable">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the element&#39;s selection state is mutable.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.selectify">
								<span class="fn-name">eles.selectify()</span>  <a href="#eles.selectify"><span class="fa fa-bookmark"></span></a>
								<span id="collection/selection/eles.selectify">&nbsp;</span>
							</div>



							<div class="descr"><p>Make the selection states of the elements mutable.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).unselectify();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.unselectify">
								<span class="fn-name">eles.unselectify()</span>  <a href="#eles.unselectify"><span class="fa fa-bookmark"></span></a>
								<span id="collection/selection/eles.unselectify">&nbsp;</span>
							</div>



							<div class="descr"><p>Make the selection states of the elements immutable.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).unselectify();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="collection/style">Style <a href="#collection/style"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="eles.addClass">
								<span class="fn-name">eles.addClass()</span>  <a href="#eles.addClass"><span class="fa fa-bookmark"></span></a>
								<span id="collection/style/eles.addClass">&nbsp;</span><span id="collection/style/eles.addClass">&nbsp;</span><span id="eles.addClass">&nbsp;</span>
							</div>



							<div class="descr"><p>Add classes to elements.  The classes should be specified in the <a href="#style">stylesheet</a> in order to have an effect on the rendered style of the elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.addClass( <span class="args-summary"><span class="comma">,&nbsp;</span>classes</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">classes</span>
													
													<span class="descr"><p>An array (or a space-separated string) of class names to add to the elements.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j, #e'</span>).addClass(<span class="hljs-string">'foo'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.removeClass">
								<span class="fn-name">eles.removeClass()</span>  <a href="#eles.removeClass"><span class="fa fa-bookmark"></span></a>
								<span id="collection/style/eles.removeClass">&nbsp;</span><span id="collection/style/eles.removeClass">&nbsp;</span><span id="eles.removeClass">&nbsp;</span>
							</div>



							<div class="descr"><p>Remove classes from elements.  The classes should be specified in the <a href="#style">stylesheet</a> in order to have an effect on the rendered style of the elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.removeClass( <span class="args-summary"><span class="comma">,&nbsp;</span>classes</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">classes</span>
													
													<span class="descr"><p>An array (or a space-separated string) of class names to remove from the elements.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j, #e'</span>).removeClass(<span class="hljs-string">'foo'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.toggleClass">
								<span class="fn-name">eles.toggleClass()</span>  <a href="#eles.toggleClass"><span class="fa fa-bookmark"></span></a>
								<span id="collection/style/eles.toggleClass">&nbsp;</span><span id="collection/style/eles.toggleClass">&nbsp;</span><span id="eles.toggleClass">&nbsp;</span>
							</div>



							<div class="descr"><p>Toggle whether the elements have the specified classes.  The classes should be specified in the <a href="#style">stylesheet</a> in order to have an effect on the rendered style of the elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.toggleClass( <span class="args-summary"><span class="comma">,&nbsp;</span>classes [<span class="comma">,&nbsp;</span>toggle]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">classes</span>
													
													<span class="descr"><p>An array (or a space-separated string) of class names to toggle on the elements.</p>
</span>

												</li>
												<li>
													<span class="name">toggle</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>Instead of automatically toggling, adds the classes on truthy values or removes them on falsey values.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Toggle:</p>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j, #e'</span>).toggleClass(<span class="hljs-string">'foo'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Toggle on:</p>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j, #e'</span>).toggleClass(<span class="hljs-string">'foo'</span>, <span class="hljs-literal">true</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Toggle off:</p>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j, #e'</span>).toggleClass(<span class="hljs-string">'foo'</span>, <span class="hljs-literal">false</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.classes">
								<span class="fn-name">eles.classes()</span> et al <a href="#eles.classes"><span class="fa fa-bookmark"></span></a>
								<span id="collection/style/eles.classes">&nbsp;</span><span id="collection/style/eles.className">&nbsp;</span><span id="eles.className">&nbsp;</span><span id="collection/style/eles.classNames">&nbsp;</span><span id="eles.classNames">&nbsp;</span><span id="collection/style/ele.classes">&nbsp;</span><span id="ele.classes">&nbsp;</span><span id="collection/style/eles.classes">&nbsp;</span><span id="eles.classes">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/style/eles.className" class="pure-alias-name">eles.className()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/style/eles.classNames" class="pure-alias-name">eles.classNames()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get or replace the current list of classes on the elements with the specified list.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.classes()</div>


										<div class="descr"><p>Get the list of classes as an array for the element.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.classes( <span class="args-summary"><span class="comma">,&nbsp;</span>classes</span> )</div>


										<div class="descr"><p>Replace the list of classes for all elements in the collection.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">classes</span>
													
													<span class="descr"><p>An array (or a space-separated string) of class names that replaces the current class list.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Remove all classes:</p>
<pre><code class="language-js">cy.nodes().classes([]); <span class="hljs-comment">// array</span>
cy.nodes().classes(<span class="hljs-string">''</span>); <span class="hljs-comment">// space-separated string</span></code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Replace classes:</p>
<pre><code class="language-js">cy.nodes().classes([<span class="hljs-string">'foo'</span>]); <span class="hljs-comment">// array</span>
cy.nodes().classes(<span class="hljs-string">'foo'</span>); <span class="hljs-comment">// space-separated string</span></code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.flashClass">
								<span class="fn-name">eles.flashClass()</span>  <a href="#eles.flashClass"><span class="fa fa-bookmark"></span></a>
								<span id="collection/style/eles.flashClass">&nbsp;</span><span id="collection/style/eles.flashClass">&nbsp;</span><span id="eles.flashClass">&nbsp;</span>
							</div>



							<div class="descr"><p>Add classes to the elements, and then remove the classes after a specified duration.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.flashClass( <span class="args-summary"><span class="comma">,&nbsp;</span>classes [<span class="comma">,&nbsp;</span>duration]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">classes</span>
													
													<span class="descr"><p>An array (or a space-separated string) of class names to flash on the elements.</p>
</span>

												</li>
												<li>
													<span class="name">duration</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>The duration in milliseconds that the classes should be added on the elements.  After the duration, the classes are removed.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j, #e'</span>).flashClass(<span class="hljs-string">'foo'</span>, <span class="hljs-number">1000</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.hasClass">
								<span class="fn-name">ele.hasClass()</span>  <a href="#ele.hasClass"><span class="fa fa-bookmark"></span></a>
								<span id="collection/style/ele.hasClass">&nbsp;</span><span id="collection/style/ele.hasClass">&nbsp;</span><span id="ele.hasClass">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether an element has a particular class.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.hasClass( <span class="args-summary"><span class="comma">,&nbsp;</span>className</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">className</span>
													
													<span class="descr"><p>The name of the class to test for.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-built_in">console</span>.log( <span class="hljs-string">'j has class `foo` : '</span>  + cy.$(<span class="hljs-string">'#j'</span>).hasClass(<span class="hljs-string">'foo'</span>) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.style">
								<span class="fn-name">eles.style()</span> et al <a href="#eles.style"><span class="fa fa-bookmark"></span></a>
								<span id="collection/style/eles.style">&nbsp;</span><span id="collection/style/eles.css">&nbsp;</span><span id="eles.css">&nbsp;</span><span id="collection/style/ele.style">&nbsp;</span><span id="ele.style">&nbsp;</span><span id="collection/style/ele.style">&nbsp;</span><span id="ele.style">&nbsp;</span><span id="collection/style/eles.style">&nbsp;</span><span id="eles.style">&nbsp;</span><span id="collection/style/eles.style">&nbsp;</span><span id="eles.style">&nbsp;</span><span id="collection/style/eles.removeStyle">&nbsp;</span><span id="eles.removeStyle">&nbsp;</span><span id="collection/style/eles.removeStyle">&nbsp;</span><span id="eles.removeStyle">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/style/eles.css" class="pure-alias-name">eles.css()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get or override the style of the element.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.style()</div>


										<div class="descr"><p>Get a name-value pair object containing visual style properties and their values for the element.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.style( <span class="args-summary"><span class="comma">,&nbsp;</span>name</span> )</div>


										<div class="descr"><p>Get a particular style property value.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">name</span>
													
													<span class="descr"><p>The name of the visual style property to get.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.style( <span class="args-summary"><span class="comma">,&nbsp;</span>name<span class="comma">,&nbsp;</span>value</span> )</div>


										<div class="descr"><p>Set a particular style property value.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">name</span>
													
													<span class="descr"><p>The name of the visual style property to set.</p>
</span>

												</li>
												<li>
													<span class="name">value</span>
													
													<span class="descr"><p>The value of the visual style property to set.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.style( <span class="args-summary"><span class="comma">,&nbsp;</span>obj</span> )</div>


										<div class="descr"><p>Set several particular style property values.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">obj</span>
													
													<span class="descr"><p>An object of style property name-value pairs to set.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.removeStyle()</div>


										<div class="descr"><p>Remove all style overrides.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.removeStyle( <span class="args-summary"><span class="comma">,&nbsp;</span>names</span> )</div>


										<div class="descr"><p>Remove specific style overrides.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">names</span>
													
													<span class="descr"><p>A space-separated list of property names to remove overrides.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p><span class="important-indicator"></span> You should use this function very sparingly for setting:</p>
<ul>
<li>There are very few valid usecases for setting with <code>ele.style()</code>.</li>
<li>It <em>overrides</em> the style of an element, despite the state and classes that it has.</li>
<li>In general, it’s much better to specify a better stylesheet at initialisation that reflects your application state rather than programmatically modifying style.</li>
<li>You can not serialise or deserialise overridden style via <code>ele.json()</code>.</li>
</ul>
<p>Only <a href="#style">defined visual style properties</a> are supported.</p>
<p>If you would like to remove a particular overridden style property, you can set <code>null</code> or <code>&#39;&#39;</code> (the empty string) to it.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.numericStyle">
								<span class="fn-name">ele.numericStyle()</span>  <a href="#ele.numericStyle"><span class="fa fa-bookmark"></span></a>
								<span id="collection/style/ele.numericStyle">&nbsp;</span><span id="collection/style/ele.numericStyle">&nbsp;</span><span id="ele.numericStyle">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the numeric value of a style property in preferred units that can be used for calculations.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.numericStyle( <span class="args-summary"><span class="comma">,&nbsp;</span>name</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">name</span>
													
													<span class="descr"><p>The name of the style property to get.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<ul>
<li>Sizes (e.g. <code>width</code>) are in <a href="#notation/position">model</a> pixels.</li>
<li>Times (e.g. <code>transition-duration</code>) are in milliseconds.</li>
<li>Angles (e.g. <code>text-rotation</code>) are in radians.</li>
<li>Plain numbers (e.g. <code>opacity</code>) are unitless.</li>
<li>Colours (e.g. <code>background-color</code>) are in <code>[r, g, b]</code> arrays with values on [0, 255].</li>
<li>Lists of numbers (e.g. <code>edge-distances</code>) are in arrays.</li>
<li>Percents range on [0, 1] so that they are useful for calculations.</li>
<li>Some properties can not have preferred units defined, like <code>background-position-x</code> — it could be in <code>px</code> or <code>%</code>, for instance.  A property like this is returned in the units as specified in the element’s style (e.g. the stylesheet).  In this case, the units can be returned explicitly via <code>ele.numericStyleUnits()</code>.</li>
<li>Values that can not be expressed as numbers (e.g. <code>label</code>) are returned as a string.</li>
</ul>
<h3 id="examples">Examples</h3>
<p><code>node.numericStyle(&#39;width&#39;)</code> would return <code>30</code> for a 30px wide node, even if the node was specified as <code>width: 3em</code>.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.numericStyleUnits">
								<span class="fn-name">ele.numericStyleUnits()</span>  <a href="#ele.numericStyleUnits"><span class="fa fa-bookmark"></span></a>
								<span id="collection/style/ele.numericStyleUnits">&nbsp;</span><span id="collection/style/ele.numericStyleUnits">&nbsp;</span><span id="ele.numericStyleUnits">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the units that <code>ele.numericStyle()</code> is expressed in, for a particular property.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.numericStyleUnits( <span class="args-summary"><span class="comma">,&nbsp;</span>name</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">name</span>
													
													<span class="descr"><p>The name of the style property to get.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.visible">
								<span class="fn-name">ele.visible()</span> et al <a href="#ele.visible"><span class="fa fa-bookmark"></span></a>
								<span id="collection/style/ele.visible">&nbsp;</span><span id="collection/style/ele.visible">&nbsp;</span><span id="ele.visible">&nbsp;</span><span id="collection/style/ele.hidden">&nbsp;</span><span id="ele.hidden">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the element is <a href="#style/visibility">visible</a> (i.e. <code>display: element</code> and <code>visibility: visible</code>).</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.visible()</div>


										<div class="descr"><p>Get whether the element is visible.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.hidden()</div>


										<div class="descr"><p>Get whether the element is hidden.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.effectiveOpacity">
								<span class="fn-name">ele.effectiveOpacity()</span>  <a href="#ele.effectiveOpacity"><span class="fa fa-bookmark"></span></a>
								<span id="collection/style/ele.effectiveOpacity">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the effective opacity of the element (i.e. on-screen opacity), which takes into consideration parent node opacity.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.transparent">
								<span class="fn-name">ele.transparent()</span>  <a href="#ele.transparent"><span class="fa fa-bookmark"></span></a>
								<span id="collection/style/ele.transparent">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the element&#39;s effective opacity is completely transparent, which takes into consideration parent node opacity.</p>
</div>


							<div class="details">
							</div>
						</div>

					<h2 id="collection/animation">Animation <a href="#collection/animation"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="ele.animated">
								<span class="fn-name">ele.animated()</span>  <a href="#ele.animated"><span class="fa fa-bookmark"></span></a>
								<span id="collection/animation/ele.animated">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the element is currently being animated.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.animate">
								<span class="fn-name">eles.animate()</span>  <a href="#eles.animate"><span class="fa fa-bookmark"></span></a>
								<span id="collection/animation/eles.animate">&nbsp;</span><span id="collection/animation/eles.animate">&nbsp;</span><span id="eles.animate">&nbsp;</span>
							</div>



							<div class="descr"><p>Animate the elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.animate( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"><p>An object containing the details of the animation.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#notation/position">position</a></span>
																
																<span class="descr"><p>A position to which the elements will be animated.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#notation/position">renderedPosition</a></span>
																
																<span class="descr"><p>A rendered position to which the elements will be animated.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#style">style</a></span>
																
																<span class="descr"><p>An object containing name-value pairs of style properties to animate.</p>
</span>
															</li>

															<li>
																<span class="name">duration</span>
																
																<span class="descr"><p>The duration of the animation in milliseconds.</p>
</span>
															</li>

															<li>
																<span class="name">queue</span>
																
																<span class="descr"><p>A boolean indicating whether to queue the animation (default <code>true</code>).</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#style/transition-animation">easing</a></span>
																
																<span class="descr"><p>A <a href="#style/transition-animation"><code>transition-timing-function</code></a> easing style string that shapes the animation progress curve.</p>
</span>
															</li>

															<li>
																<span class="name">complete</span>
																
																<span class="descr"><p>A function to call when the animation is done.</p>
</span>
															</li>

															<li>
																<span class="name">step</span>
																
																<span class="descr"><p>A function to call each time the animation steps.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that you can specify only one of <code>position</code> and <code>renderedPosition</code>:  You can not animate to two positions at once.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.nodes().animate({
  <span class="hljs-attr">position</span>: { <span class="hljs-attr">x</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">100</span> },
  <span class="hljs-attr">style</span>: { <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'red'</span> }
}, {
  <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>
});

<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Animating nodes...'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.animation">
								<span class="fn-name">ele.animation()</span>  <a href="#ele.animation"><span class="fa fa-bookmark"></span></a>
								<span id="collection/animation/ele.animation">&nbsp;</span><span id="collection/animation/ele.animation">&nbsp;</span><span id="ele.animation">&nbsp;</span>
							</div>



							<div class="descr"><p>Get an <a href="#animations">animation</a> for the element.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.animation( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"><p>An object containing the details of the animation.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#notation/position">position</a></span>
																
																<span class="descr"><p>A position to which the elements will be animated.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#notation/position">renderedPosition</a></span>
																
																<span class="descr"><p>A rendered position to which the elements will be animated.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#style">style</a></span>
																
																<span class="descr"><p>An object containing name-value pairs of style properties to animate.</p>
</span>
															</li>

															<li>
																<span class="name">duration</span>
																
																<span class="descr"><p>The duration of the animation in milliseconds.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#style/transition-animation">easing</a></span>
																
																<span class="descr"><p>A <a href="#style/transition-animation"><code>transition-timing-function</code></a> easing style string that shapes the animation progress curve.</p>
</span>
															</li>

															<li>
																<span class="name">complete</span>
																
																<span class="descr"><p>A function to call when the animation is done.</p>
</span>
															</li>

															<li>
																<span class="name">step</span>
																
																<span class="descr"><p>A function to call each time the animation steps.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.delay">
								<span class="fn-name">eles.delay()</span>  <a href="#eles.delay"><span class="fa fa-bookmark"></span></a>
								<span id="collection/animation/eles.delay">&nbsp;</span><span id="collection/animation/eles.delay">&nbsp;</span><span id="eles.delay">&nbsp;</span>
							</div>



							<div class="descr"><p>Add a delay between queued animations for the elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.delay( <span class="args-summary"><span class="comma">,&nbsp;</span>duration<span class="comma">,&nbsp;</span>complete</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">duration</span>
													
													<span class="descr"><p>How long the delay should be in milliseconds.</p>
</span>

												</li>
												<li>
													<span class="name">complete</span>
													
													<span class="descr"><p>A function to call when the delay is complete.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.nodes()
  .animate({
      <span class="hljs-attr">style</span>: { <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'blue'</span> }
    }, {
      <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>
    })

  .delay( <span class="hljs-number">1000</span> )

  .animate({
    <span class="hljs-attr">style</span>: { <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'yellow'</span> }
  })
;

<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Animating nodes...'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ele.delayAnimation">
								<span class="fn-name">ele.delayAnimation()</span>  <a href="#ele.delayAnimation"><span class="fa fa-bookmark"></span></a>
								<span id="collection/animation/ele.delayAnimation">&nbsp;</span><span id="collection/animation/ele.delayAnimation">&nbsp;</span><span id="ele.delayAnimation">&nbsp;</span>
							</div>



							<div class="descr"><p>Get a delay <a href="#animations">animation</a> for the element.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ele.delayAnimation( <span class="args-summary"><span class="comma">,&nbsp;</span>duration</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">duration</span>
													
													<span class="descr"><p>How long the delay should be in milliseconds.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.stop">
								<span class="fn-name">eles.stop()</span>  <a href="#eles.stop"><span class="fa fa-bookmark"></span></a>
								<span id="collection/animation/eles.stop">&nbsp;</span><span id="collection/animation/eles.stop">&nbsp;</span><span id="eles.stop">&nbsp;</span>
							</div>



							<div class="descr"><p>Stop all animations that are currently running.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.stop( <span class="args-summary"><span class="comma">,&nbsp;</span>clearQueue<span class="comma">,&nbsp;</span>jumpToEnd</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">clearQueue</span>
													
													<span class="descr"><p>A boolean, indicating whether the queue of animations should be emptied.</p>
</span>

												</li>
												<li>
													<span class="name">jumpToEnd</span>
													
													<span class="descr"><p>A boolean, indicating whether the currently-running animations should jump to their ends rather than just stopping midway.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.nodes().animate({
  <span class="hljs-attr">style</span>: { <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'cyan'</span> }
}, {
  <span class="hljs-attr">duration</span>: <span class="hljs-number">5000</span>,
  <span class="hljs-attr">complete</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Animation complete'</span>);
  }
});

<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Animating nodes...'</span>);

setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Stopping nodes animation'</span>);
  cy.nodes().stop();
}, <span class="hljs-number">2500</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.clearQueue">
								<span class="fn-name">eles.clearQueue()</span>  <a href="#eles.clearQueue"><span class="fa fa-bookmark"></span></a>
								<span id="collection/animation/eles.clearQueue">&nbsp;</span>
							</div>



							<div class="descr"><p>Remove all queued animations for the elements.</p>
</div>


							<div class="details">
							</div>
						</div>

					<h2 id="collection/comparison">Comparison <a href="#collection/comparison"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="eles.same">
								<span class="fn-name">eles.same()</span>  <a href="#eles.same"><span class="fa fa-bookmark"></span></a>
								<span id="collection/comparison/eles.same">&nbsp;</span><span id="collection/comparison/eles.same">&nbsp;</span><span id="eles.same">&nbsp;</span>
							</div>



							<div class="descr"><p>Determine whether this collection contains exactly the same elements as another collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.same( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The other elements to compare to.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> heavies = cy.$(<span class="hljs-string">'node[weight &gt; 60]'</span>);
<span class="hljs-keyword">var</span> guys = cy.$(<span class="hljs-string">'#j, #g, #k'</span>);

<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'same ? '</span> + heavies.same(guys) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.anySame">
								<span class="fn-name">eles.anySame()</span>  <a href="#eles.anySame"><span class="fa fa-bookmark"></span></a>
								<span id="collection/comparison/eles.anySame">&nbsp;</span><span id="collection/comparison/eles.anySame">&nbsp;</span><span id="eles.anySame">&nbsp;</span>
							</div>



							<div class="descr"><p>Determine whether this collection contains any of the same elements as another collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.anySame( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The other elements to compare to.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);
<span class="hljs-keyword">var</span> guys = cy.$(<span class="hljs-string">'#j, #g, #k'</span>);

<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'any same ? '</span> + j.anySame(guys) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.contains">
								<span class="fn-name">eles.contains()</span>  <a href="#eles.contains"><span class="fa fa-bookmark"></span></a>
								<span id="collection/comparison/eles.contains">&nbsp;</span><span id="collection/comparison/eles.has">&nbsp;</span><span id="eles.has">&nbsp;</span><span id="collection/comparison/eles.contains">&nbsp;</span><span id="eles.contains">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/comparison/eles.has" class="pure-alias-name">eles.has()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Determine whether this collection contains all of the elements of another collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.contains( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The other elements to compare to.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j, #e'</span>).contains( cy.$(<span class="hljs-string">'#j'</span>) ); <span class="hljs-comment">// true</span></code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.allAreNeighbors">
								<span class="fn-name">eles.allAreNeighbors()</span>  <a href="#eles.allAreNeighbors"><span class="fa fa-bookmark"></span></a>
								<span id="collection/comparison/eles.allAreNeighbors">&nbsp;</span><span id="collection/comparison/eles.allAreNeighbours">&nbsp;</span><span id="eles.allAreNeighbours">&nbsp;</span><span id="collection/comparison/eles.allAreNeighbors">&nbsp;</span><span id="eles.allAreNeighbors">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/comparison/eles.allAreNeighbours" class="pure-alias-name">eles.allAreNeighbours()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Determine whether all elements in the specified collection are in the neighbourhood of the calling collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.allAreNeighbors( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The other elements to compare to.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);
<span class="hljs-keyword">var</span> gAndK = cy.$(<span class="hljs-string">'#g, #k'</span>);

<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'all neighbours ? '</span> + j.allAreNeighbors(gAndK) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.is">
								<span class="fn-name">eles.is()</span>  <a href="#eles.is"><span class="fa fa-bookmark"></span></a>
								<span id="collection/comparison/eles.is">&nbsp;</span><span id="collection/comparison/eles.is">&nbsp;</span><span id="eles.is">&nbsp;</span>
							</div>



							<div class="descr"><p>Determine whether any element in this collection matches a selector.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.is( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>The selector to match against.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);

<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'j has weight &gt; 50 ? '</span> + j.is(<span class="hljs-string">'[weight &gt; 50]'</span>) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.allAre">
								<span class="fn-name">eles.allAre()</span>  <a href="#eles.allAre"><span class="fa fa-bookmark"></span></a>
								<span id="collection/comparison/eles.allAre">&nbsp;</span><span id="collection/comparison/eles.allAre">&nbsp;</span><span id="eles.allAre">&nbsp;</span>
							</div>



							<div class="descr"><p>Determine whether all elements in the collection match a selector.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.allAre( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>The selector to match against.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> jAndE = cy.$(<span class="hljs-string">'#j, #e'</span>);

<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'j and e all have weight &gt; 50 ? '</span> + jAndE.allAre(<span class="hljs-string">'[weight &gt; 50]'</span>) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.some">
								<span class="fn-name">eles.some()</span>  <a href="#eles.some"><span class="fa fa-bookmark"></span></a>
								<span id="collection/comparison/eles.some">&nbsp;</span><span id="collection/comparison/eles.some">&nbsp;</span><span id="eles.some">&nbsp;</span>
							</div>



							<div class="descr"><p>Determine whether any element in this collection satisfies the specified test function.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.some( <span class="args-summary"><span class="comma">,&nbsp;</span>function(ele, i, eles) [<span class="comma">,&nbsp;</span>thisArg]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">function(ele, i, eles)</span>
													
													<span class="descr"><p>The test function that returns truthy values for elements that satisfy the test and falsey values for elements that do not satisfy the test.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">ele</a></span>
																
																<span class="descr"><p>The current element.</p>
</span>
															</li>

															<li>
																<span class="name">i</span>
																
																<span class="descr"><p>The index of the current element.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#collection">eles</a></span>
																
																<span class="descr"><p>The collection of elements being tested.</p>
</span>
															</li>

													</ul>
												</li>
												<li>
													<span class="name">thisArg</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>The value for <code>this</code> within the test function.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> jAndE = cy.$(<span class="hljs-string">'#j, #e'</span>);
<span class="hljs-keyword">var</span> someHeavierThan50 = jAndE.some(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> ele </span>)</span>{
  <span class="hljs-keyword">return</span> ele.data(<span class="hljs-string">'weight'</span>) &gt; <span class="hljs-number">50</span>;
});

<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'some heavier than 50 ? '</span> + someHeavierThan50 );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.every">
								<span class="fn-name">eles.every()</span>  <a href="#eles.every"><span class="fa fa-bookmark"></span></a>
								<span id="collection/comparison/eles.every">&nbsp;</span><span id="collection/comparison/eles.every">&nbsp;</span><span id="eles.every">&nbsp;</span>
							</div>



							<div class="descr"><p>Determine whether all elements in this collection satisfy the specified test function.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.every( <span class="args-summary"><span class="comma">,&nbsp;</span>function(ele, i, eles) [<span class="comma">,&nbsp;</span>thisArg]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">function(ele, i, eles)</span>
													
													<span class="descr"><p>The test function that returns truthy values for elements that satisfy the test and falsey values for elements that do not satisfy the test.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">ele</a></span>
																
																<span class="descr"><p>The current element.</p>
</span>
															</li>

															<li>
																<span class="name">i</span>
																
																<span class="descr"><p>The index of the current element.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#collection">eles</a></span>
																
																<span class="descr"><p>The collection of elements being tested.</p>
</span>
															</li>

													</ul>
												</li>
												<li>
													<span class="name">thisArg</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>The value for <code>this</code> within the test function.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> jAndE = cy.$(<span class="hljs-string">'#j, #e'</span>);
<span class="hljs-keyword">var</span> everyHeavierThan50 = jAndE.every(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> ele </span>)</span>{
  <span class="hljs-keyword">return</span> ele.data(<span class="hljs-string">'weight'</span>) &gt; <span class="hljs-number">50</span>;
});

<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'every heavier than 50 ? '</span> + everyHeavierThan50 );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="collection/iteration">Iteration <a href="#collection/iteration"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="eles.size">
								<span class="fn-name">eles.size()</span>  <a href="#eles.size"><span class="fa fa-bookmark"></span></a>
								<span id="collection/iteration/eles.size">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the number of elements in the collection.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p><span class="important-indicator"></span> Note that as an alternative, you may read <code>eles.length</code> instead of <code>eles.size()</code>.  The two are interchangeable.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.empty">
								<span class="fn-name">eles.empty()</span> et al <a href="#eles.empty"><span class="fa fa-bookmark"></span></a>
								<span id="collection/iteration/eles.empty">&nbsp;</span><span id="collection/iteration/eles.empty">&nbsp;</span><span id="eles.empty">&nbsp;</span><span id="collection/iteration/eles.nonempty">&nbsp;</span><span id="eles.nonempty">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the collection is empty, meaning it has no elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.empty()</div>


										<div class="descr"><p>Get whether the collection is empty.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.nonempty()</div>


										<div class="descr"><p>Get whether the collection is nonempty.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.forEach">
								<span class="fn-name">eles.forEach()</span>  <a href="#eles.forEach"><span class="fa fa-bookmark"></span></a>
								<span id="collection/iteration/eles.forEach">&nbsp;</span><span id="collection/iteration/eles.each">&nbsp;</span><span id="eles.each">&nbsp;</span><span id="collection/iteration/eles.forEach">&nbsp;</span><span id="eles.forEach">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/iteration/eles.each" class="pure-alias-name">eles.each()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Iterate over the elements in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.forEach( <span class="args-summary"><span class="comma">,&nbsp;</span>function(ele, i, eles) [<span class="comma">,&nbsp;</span>thisArg]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">function(ele, i, eles)</span>
													
													<span class="descr"><p>The function executed each iteration.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">ele</a></span>
																
																<span class="descr"><p>The current element.</p>
</span>
															</li>

															<li>
																<span class="name">i</span>
																
																<span class="descr"><p>The index of the current element.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#collection">eles</a></span>
																
																<span class="descr"><p>The collection of elements being iterated.</p>
</span>
															</li>

													</ul>
												</li>
												<li>
													<span class="name">thisArg</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>The value for <code>this</code> within the iterating function.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function behaves like <code>Array.prototype.forEach()</code> with minor changes for convenience:</p>
<ul>
<li>You can exit the iteration early by returning <code>false</code> in the iterating function.  The <code>Array.prototype.forEach()</code> implementation does not support this, but it is included anyway on account of its utility.</li>
</ul>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-comment">// print all the ids of the nodes in the graph</span>
cy.nodes().forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> ele </span>)</span>{
  <span class="hljs-built_in">console</span>.log( ele.id() );
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.eq">
								<span class="fn-name">eles.eq()</span> et al <a href="#eles.eq"><span class="fa fa-bookmark"></span></a>
								<span id="collection/iteration/eles.eq">&nbsp;</span><span id="collection/iteration/eles.eq">&nbsp;</span><span id="eles.eq">&nbsp;</span><span id="collection/iteration/eles.first">&nbsp;</span><span id="eles.first">&nbsp;</span><span id="collection/iteration/eles.last">&nbsp;</span><span id="eles.last">&nbsp;</span>
							</div>



							<div class="descr"><p>Get an element at a particular index in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.eq( <span class="args-summary"><span class="comma">,&nbsp;</span>index</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">index</span>
													
													<span class="descr"><p>The index of the element to get.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.first()</div>


										<div class="descr"><p>Get the first element in the collection.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.last()</div>


										<div class="descr"><p>Get the last element in the collection.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p><span class="important-indicator"></span> You may use <code>eles[i]</code> in place of <code>eles.eq(i)</code> as a more performant alternative.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.slice">
								<span class="fn-name">eles.slice()</span>  <a href="#eles.slice"><span class="fa fa-bookmark"></span></a>
								<span id="collection/iteration/eles.slice">&nbsp;</span><span id="collection/iteration/eles.slice">&nbsp;</span><span id="eles.slice">&nbsp;</span>
							</div>



							<div class="descr"><p>Get a subset of the elements in the collection based on specified indices.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.slice( <span class="args-summary"> [<span class="comma">,&nbsp;</span>start] [<span class="comma">,&nbsp;</span>end]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">start</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An integer that specifies where to start the selection.  The first element has an index of 0.  Use negative numbers to select from the end of an array.</p>
</span>

												</li>
												<li>
													<span class="name">end</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An integer that specifies where to end the selection. If omitted, all elements from the start position and to the end of the array will be selected. Use negative numbers to select from the end of an array.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.toArray">
								<span class="fn-name">eles.toArray()</span>  <a href="#eles.toArray"><span class="fa fa-bookmark"></span></a>
								<span id="collection/iteration/eles.toArray">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the collection as an array, maintaining the order of the elements.</p>
</div>


							<div class="details">
							</div>
						</div>

					<h2 id="collection/building--filtering">Building &amp; filtering <a href="#collection/building--filtering"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="eles.getElementById">
								<span class="fn-name">eles.getElementById()</span>  <a href="#eles.getElementById"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.getElementById">&nbsp;</span><span id="collection/building--filtering/eles.$id">&nbsp;</span><span id="eles.$id">&nbsp;</span><span id="collection/building--filtering/eles.getElementById">&nbsp;</span><span id="eles.getElementById">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/building--filtering/eles.$id" class="pure-alias-name">eles.$id()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get an element in the collection from its ID in a very performant way.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.getElementById( <span class="args-summary"><span class="comma">,&nbsp;</span>id</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">id</span>
													
													<span class="descr"><p>The ID of the element to get.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.union">
								<span class="fn-name">eles.union()</span>  <a href="#eles.union"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.union">&nbsp;</span><span id="collection/building--filtering/eles.add">&nbsp;</span><span id="eles.add">&nbsp;</span><span id="collection/building--filtering/eles.or">&nbsp;</span><span id="eles.or">&nbsp;</span><span id="collection/building--filtering/eles[&#x27;u&#x27;]">&nbsp;</span><span id="eles[&#x27;u&#x27;]">&nbsp;</span><span id="collection/building--filtering/eles[&#x27;+&#x27;]">&nbsp;</span><span id="eles[&#x27;+&#x27;]">&nbsp;</span><span id="collection/building--filtering/eles[&#x27;|&#x27;]">&nbsp;</span><span id="eles[&#x27;|&#x27;]">&nbsp;</span><span id="collection/building--filtering/eles.union">&nbsp;</span><span id="eles.union">&nbsp;</span><span id="collection/building--filtering/eles.union">&nbsp;</span><span id="eles.union">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/building--filtering/eles.add" class="pure-alias-name">eles.add()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles.or" class="pure-alias-name">eles.or()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles[&#x27;u&#x27;]" class="pure-alias-name">eles[&#x27;u&#x27;]()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles[&#x27;+&#x27;]" class="pure-alias-name">eles[&#x27;+&#x27;]()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles[&#x27;|&#x27;]" class="pure-alias-name">eles[&#x27;|&#x27;]()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get a new collection, resulting from adding the collection with another one</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.union( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The elements to add.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.union( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>Elements in the graph matching this selector are added.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>With a collection:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);
<span class="hljs-keyword">var</span> e = cy.$(<span class="hljs-string">'#e'</span>);

j.union(e);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>With a selector:</p>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).union(<span class="hljs-string">'#e'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.difference">
								<span class="fn-name">eles.difference()</span>  <a href="#eles.difference"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.difference">&nbsp;</span><span id="collection/building--filtering/eles.not">&nbsp;</span><span id="eles.not">&nbsp;</span><span id="collection/building--filtering/eles.subtract">&nbsp;</span><span id="eles.subtract">&nbsp;</span><span id="collection/building--filtering/eles.relativeComplement">&nbsp;</span><span id="eles.relativeComplement">&nbsp;</span><span id="collection/building--filtering/eles[&#x27;\\&#x27;]">&nbsp;</span><span id="eles[&#x27;\\&#x27;]">&nbsp;</span><span id="collection/building--filtering/eles[&#x27;!&#x27;]">&nbsp;</span><span id="eles[&#x27;!&#x27;]">&nbsp;</span><span id="collection/building--filtering/eles[&#x27;-&#x27;]">&nbsp;</span><span id="eles[&#x27;-&#x27;]">&nbsp;</span><span id="collection/building--filtering/eles.difference">&nbsp;</span><span id="eles.difference">&nbsp;</span><span id="collection/building--filtering/eles.difference">&nbsp;</span><span id="eles.difference">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/building--filtering/eles.not" class="pure-alias-name">eles.not()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles.subtract" class="pure-alias-name">eles.subtract()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles.relativeComplement" class="pure-alias-name">eles.relativeComplement()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles[&#x27;\\&#x27;]" class="pure-alias-name">eles[&#x27;\\&#x27;]()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles[&#x27;!&#x27;]" class="pure-alias-name">eles[&#x27;!&#x27;]()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles[&#x27;-&#x27;]" class="pure-alias-name">eles[&#x27;-&#x27;]()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get a new collection, resulting from the collection without some specified elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.difference( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The elements that will not be in the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.difference( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>Elements from the calling collection matching this selector will not be in the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>With a collection:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);
<span class="hljs-keyword">var</span> nodes = cy.nodes();

nodes.difference(j);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>With a selector:</p>
<pre><code class="language-js">cy.nodes().difference(<span class="hljs-string">'#j'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.absoluteComplement">
								<span class="fn-name">eles.absoluteComplement()</span>  <a href="#eles.absoluteComplement"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.absoluteComplement">&nbsp;</span><span id="collection/building--filtering/eles.abscomp">&nbsp;</span><span id="eles.abscomp">&nbsp;</span><span id="collection/building--filtering/eles.complement">&nbsp;</span><span id="eles.complement">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/building--filtering/eles.abscomp" class="pure-alias-name">eles.abscomp()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles.complement" class="pure-alias-name">eles.complement()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get all elements in the graph that are not in the calling collection.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).absoluteComplement();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.intersection">
								<span class="fn-name">eles.intersection()</span>  <a href="#eles.intersection"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.intersection">&nbsp;</span><span id="collection/building--filtering/eles.intersect">&nbsp;</span><span id="eles.intersect">&nbsp;</span><span id="collection/building--filtering/eles.and">&nbsp;</span><span id="eles.and">&nbsp;</span><span id="collection/building--filtering/eles[&#x27;n&#x27;]">&nbsp;</span><span id="eles[&#x27;n&#x27;]">&nbsp;</span><span id="collection/building--filtering/eles[&#x27;&amp;&#x27;]">&nbsp;</span><span id="eles[&#x27;&amp;&#x27;]">&nbsp;</span><span id="collection/building--filtering/eles[&#x27;.&#x27;]">&nbsp;</span><span id="eles[&#x27;.&#x27;]">&nbsp;</span><span id="collection/building--filtering/eles.intersection">&nbsp;</span><span id="eles.intersection">&nbsp;</span><span id="collection/building--filtering/eles.intersection">&nbsp;</span><span id="eles.intersection">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/building--filtering/eles.intersect" class="pure-alias-name">eles.intersect()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles.and" class="pure-alias-name">eles.and()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles[&#x27;n&#x27;]" class="pure-alias-name">eles[&#x27;n&#x27;]()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles[&#x27;&amp;&#x27;]" class="pure-alias-name">eles[&#x27;&amp;&#x27;]()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles[&#x27;.&#x27;]" class="pure-alias-name">eles[&#x27;.&#x27;]()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get the elements in both this collection and another specified collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.intersection( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The elements to intersect with.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.intersection( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>A selector representing the elements to intersect with.  All elements in the graph matching the selector are used as the passed collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> jNhd = cy.$(<span class="hljs-string">'#j'</span>).neighborhood();
<span class="hljs-keyword">var</span> eNhd = cy.$(<span class="hljs-string">'#e'</span>).neighborhood();

jNhd.intersection( eNhd );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.symmetricDifference">
								<span class="fn-name">eles.symmetricDifference()</span>  <a href="#eles.symmetricDifference"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.symmetricDifference">&nbsp;</span><span id="collection/building--filtering/eles.symdiff">&nbsp;</span><span id="eles.symdiff">&nbsp;</span><span id="collection/building--filtering/eles.xor">&nbsp;</span><span id="eles.xor">&nbsp;</span><span id="collection/building--filtering/eles[&#x27;^&#x27;]">&nbsp;</span><span id="eles[&#x27;^&#x27;]">&nbsp;</span><span id="collection/building--filtering/eles[&#x27;(+)&#x27;]">&nbsp;</span><span id="eles[&#x27;(+)&#x27;]">&nbsp;</span><span id="collection/building--filtering/eles[&#x27;(-)&#x27;]">&nbsp;</span><span id="eles[&#x27;(-)&#x27;]">&nbsp;</span><span id="collection/building--filtering/eles.symmetricDifference">&nbsp;</span><span id="eles.symmetricDifference">&nbsp;</span><span id="collection/building--filtering/eles.symmetricDifference">&nbsp;</span><span id="eles.symmetricDifference">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/building--filtering/eles.symdiff" class="pure-alias-name">eles.symdiff()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles.xor" class="pure-alias-name">eles.xor()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles[&#x27;^&#x27;]" class="pure-alias-name">eles[&#x27;^&#x27;]()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles[&#x27;(+)&#x27;]" class="pure-alias-name">eles[&#x27;(+)&#x27;]()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/building--filtering/eles[&#x27;(-)&#x27;]" class="pure-alias-name">eles[&#x27;(-)&#x27;]()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get the elements that are in the calling collection or the passed collection but not in both.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.symmetricDifference( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The elements to apply the symmetric difference with.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.symmetricDifference( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>A selector representing the elements to apply the symmetric difference with.  All elements in the graph matching the selector are used as the passed collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j, #e, #k'</span>).symdiff(<span class="hljs-string">'#j, #g'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.diff">
								<span class="fn-name">eles.diff()</span>  <a href="#eles.diff"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.diff">&nbsp;</span><span id="collection/building--filtering/eles.diff">&nbsp;</span><span id="eles.diff">&nbsp;</span><span id="collection/building--filtering/eles.diff">&nbsp;</span><span id="eles.diff">&nbsp;</span>
							</div>



							<div class="descr"><p>Perform a traditional left/right diff on the two collections.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.diff( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The elements on the right side of the diff.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.diff( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>A selector representing the elements on the right side of the diff.  All elements in the graph matching the selector are used as the passed collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns a plain object of the form <code>{ left, right, both }</code> where </p>
<ul>
<li><code>left</code> is the set of elements only in the calling (i.e. left) collection,</li>
<li><code>right</code> is the set of elements only in the passed (i.e. right) collection, and</li>
<li><code>both</code> is the set of elements in both collections.</li>
</ul>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> diff = cy.$(<span class="hljs-string">'#j, #e, #k'</span>).diff(<span class="hljs-string">'#j, #g'</span>);
<span class="hljs-keyword">var</span> getNodeId = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> n </span>)</span>{ <span class="hljs-keyword">return</span> n.id() };

<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'left: '</span> + diff.left.map( getNodeId ).join(<span class="hljs-string">', '</span>) );
<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'right: '</span> + diff.right.map( getNodeId ).join(<span class="hljs-string">', '</span>) );
<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'both: '</span> + diff.both.map( getNodeId ).join(<span class="hljs-string">', '</span>) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.merge">
								<span class="fn-name">eles.merge()</span>  <a href="#eles.merge"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.merge">&nbsp;</span><span id="collection/building--filtering/eles.merge">&nbsp;</span><span id="eles.merge">&nbsp;</span><span id="collection/building--filtering/eles.merge">&nbsp;</span><span id="eles.merge">&nbsp;</span>
							</div>



							<div class="descr"><p>Perform a in-place merge of the given elements into the calling collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.merge( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The elements to merge in-place.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.merge( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>A selector representing the elements to merge.  All elements in the graph matching the selector are used as the passed collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p><span class="important-indicator"></span> This function modifies the calling collection instead of returning a new one.  Use of this function should be considered for performance in some cases, but otherwise should be avoided.  Consider using <code>eles.union()</code> instead.</p>
<p><span class="important-indicator"></span> Use this function only on new collections that you create yourself, using <code>cy.collection()</code>.  This ensures that you do not unintentionally modify another collection.</p>
<h3 id="examples">Examples</h3>
<p>With a collection:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> col = cy.collection(); <span class="hljs-comment">// new, empty collection</span>
<span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);
<span class="hljs-keyword">var</span> e = cy.$(<span class="hljs-string">'#e'</span>);

col.merge( j ).merge( e );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>With a selector:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> col = cy.collection(); <span class="hljs-comment">// new, empty collection</span>

col.merge(<span class="hljs-string">'#j'</span>).merge(<span class="hljs-string">'#e'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.unmerge">
								<span class="fn-name">eles.unmerge()</span>  <a href="#eles.unmerge"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.unmerge">&nbsp;</span><span id="collection/building--filtering/eles.unmerge">&nbsp;</span><span id="eles.unmerge">&nbsp;</span><span id="collection/building--filtering/eles.unmerge">&nbsp;</span><span id="eles.unmerge">&nbsp;</span>
							</div>



							<div class="descr"><p>Perform an in-place operation on the calling collection to remove the given elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.unmerge( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The elements to remove in-place.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.unmerge( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>A selector representing the elements to remove.  All elements in the graph matching the selector are used as the passed collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p><span class="important-indicator"></span> This function modifies the calling collection instead of returning a new one.  Use of this function should be considered for performance in some cases, but otherwise should be avoided.  Consider using <code>eles.filter()</code> or <code>eles.remove()</code> instead.</p>
<p><span class="important-indicator"></span> Use this function only on new collections that you create yourself, using <code>cy.collection()</code>.  This ensures that you do not unintentionally modify another collection.</p>
<h3 id="examples">Examples</h3>
<p>With a collection:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> col = cy.collection(); <span class="hljs-comment">// new, empty collection</span>
<span class="hljs-keyword">var</span> e = cy.$(<span class="hljs-string">'#e'</span>);

col.merge( cy.nodes() );

col.unmerge( e );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>With a selector:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> col = cy.collection(); <span class="hljs-comment">// new, empty collection</span>

col.merge( cy.nodes() );

col.unmerge(<span class="hljs-string">'#e'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.filter">
								<span class="fn-name">eles.filter()</span> et al <a href="#eles.filter"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.filter">&nbsp;</span><span id="collection/building--filtering/eles.filter">&nbsp;</span><span id="eles.filter">&nbsp;</span><span id="collection/building--filtering/eles.filter">&nbsp;</span><span id="eles.filter">&nbsp;</span><span id="collection/building--filtering/eles.nodes">&nbsp;</span><span id="eles.nodes">&nbsp;</span><span id="collection/building--filtering/eles.edges">&nbsp;</span><span id="eles.edges">&nbsp;</span>
							</div>



							<div class="descr"><p>Get a new collection containing elements that are accepted by the specified filter function or selector.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.filter( <span class="args-summary"><span class="comma">,&nbsp;</span>function(ele, i, eles) [<span class="comma">,&nbsp;</span>thisArg]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">function(ele, i, eles)</span>
													
													<span class="descr"><p>The filter function that returns truthy values for elements to include and falsey values for elements to exclude.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">ele</a></span>
																
																<span class="descr"><p>The current element.</p>
</span>
															</li>

															<li>
																<span class="name">i</span>
																
																<span class="descr"><p>The index of the current element.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#collection">eles</a></span>
																
																<span class="descr"><p>The collection of elements being filtered.</p>
</span>
															</li>

													</ul>
												</li>
												<li>
													<span class="name">thisArg</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>The value for <code>this</code> within the iterating function.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.filter( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"><p>Get the elements that match the specified selector.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>The selector to match against.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.nodes( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"><p>Get the nodes that match the specified selector.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>The selector to match against.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.edges( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"><p>Get the edges that match the specified selector.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>The selector to match against.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>With a selector:</p>
<pre><code class="language-js">cy.nodes().filter(<span class="hljs-string">'[weight &gt; 50]'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>With a function:</p>
<pre><code class="language-js">cy.nodes().filter(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> ele </span>)</span>{
  <span class="hljs-keyword">return</span> ele.data(<span class="hljs-string">'weight'</span>) &gt; <span class="hljs-number">50</span>;
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.sort">
								<span class="fn-name">eles.sort()</span>  <a href="#eles.sort"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.sort">&nbsp;</span><span id="collection/building--filtering/eles.sort">&nbsp;</span><span id="eles.sort">&nbsp;</span>
							</div>



							<div class="descr"><p>Get a new collection containing the elements sorted by the specified comparison function.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.sort( <span class="args-summary"><span class="comma">,&nbsp;</span>function(ele1, ele2)</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">function(ele1, ele2)</span>
													
													<span class="descr"><p>The sorting comparison function that returns a negative number for <code>ele1</code> before <code>ele2</code>, 0 for <code>ele1</code> same as <code>ele2</code>, or a positive number for <code>ele1</code> after <code>ele2</code>.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Get collection of nodes in order of increasing weight:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> nodes = cy.nodes().sort(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> a, b </span>)</span>{
  <span class="hljs-keyword">return</span> a.data(<span class="hljs-string">'weight'</span>) - b.data(<span class="hljs-string">'weight'</span>);
});

<span class="hljs-comment">// show order via animations</span>
<span class="hljs-keyword">var</span> duration = <span class="hljs-number">1000</span>;
nodes.removeStyle().forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node, i </span>)</span>{
  node.delay( i * duration ).animate({
    <span class="hljs-attr">style</span>: {
      <span class="hljs-string">'border-width'</span>: <span class="hljs-number">4</span>,
      <span class="hljs-string">'border-color'</span>: <span class="hljs-string">'green'</span>
    }
  }, { <span class="hljs-attr">duration</span>: duration });
});

<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Animating nodes to show sorted order'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.map">
								<span class="fn-name">eles.map()</span>  <a href="#eles.map"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.map">&nbsp;</span><span id="collection/building--filtering/eles.map">&nbsp;</span><span id="eles.map">&nbsp;</span>
							</div>



							<div class="descr"><p>Get an array containing values mapped from the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.map( <span class="args-summary"><span class="comma">,&nbsp;</span>function(ele, i, eles) [<span class="comma">,&nbsp;</span>thisArg]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">function(ele, i, eles)</span>
													
													<span class="descr"><p>The function that returns the mapped value for each element.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">ele</a></span>
																
																<span class="descr"><p>The current element.</p>
</span>
															</li>

															<li>
																<span class="name">i</span>
																
																<span class="descr"><p>The index of the current element.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#collection">eles</a></span>
																
																<span class="descr"><p>The collection of elements being mapped.</p>
</span>
															</li>

													</ul>
												</li>
												<li>
													<span class="name">thisArg</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>The value for <code>this</code> within the iterating function.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Get an array of node weights:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> weights = cy.nodes().map(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> ele </span>)</span>{
  <span class="hljs-keyword">return</span> ele.data(<span class="hljs-string">'weight'</span>);
});

<span class="hljs-built_in">console</span>.log(weights);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.reduce">
								<span class="fn-name">eles.reduce()</span>  <a href="#eles.reduce"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.reduce">&nbsp;</span><span id="collection/building--filtering/eles.reduce">&nbsp;</span><span id="eles.reduce">&nbsp;</span>
							</div>



							<div class="descr"><p>Reduce a single value by applying a function against an accumulator and each value of the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.reduce( <span class="args-summary"><span class="comma">,&nbsp;</span>function(prevVal, ele, i, eles)</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">function(prevVal, ele, i, eles)</span>
													
													<span class="descr"><p>The function that returns the accumulated value given the previous value and the current element.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name">prevVal</span>
																
																<span class="descr"><p>The value accumulated from previous elements.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#collection">ele</a></span>
																
																<span class="descr"><p>The current element.</p>
</span>
															</li>

															<li>
																<span class="name">i</span>
																
																<span class="descr"><p>The index of the current element.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#collection">eles</a></span>
																
																<span class="descr"><p>The collection of elements being reduced.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Join the node IDs into a comma-separated string:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> initialValue = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">var</span> fn = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> prevVal, ele, i, eles </span>)</span>{
  <span class="hljs-keyword">if</span>( prevVal ){
    <span class="hljs-keyword">return</span> prevVal + <span class="hljs-string">','</span> + ele.id();
  } <span class="hljs-keyword">else</span> {
    <span class="hljs-keyword">return</span> ele.id();
  }
};
<span class="hljs-keyword">var</span> ids = cy.nodes().reduce( fn, initialValue );

<span class="hljs-built_in">console</span>.log( ids );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.min">
								<span class="fn-name">eles.min()</span>  <a href="#eles.min"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.min">&nbsp;</span><span id="collection/building--filtering/eles.min">&nbsp;</span><span id="eles.min">&nbsp;</span>
							</div>



							<div class="descr"><p>Find a minimum value in a collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.min( <span class="args-summary"><span class="comma">,&nbsp;</span>function(ele, i, eles) [<span class="comma">,&nbsp;</span>thisArg]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">function(ele, i, eles)</span>
													
													<span class="descr"><p>The function that returns the value to compare for each element.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">ele</a></span>
																
																<span class="descr"><p>The current element.</p>
</span>
															</li>

															<li>
																<span class="name">i</span>
																
																<span class="descr"><p>The index of the current element.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#collection">eles</a></span>
																
																<span class="descr"><p>The collection of elements being searched.</p>
</span>
															</li>

													</ul>
												</li>
												<li>
													<span class="name">thisArg</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>The value for <code>this</code> within the iterating function.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns an object with the following fields:</p>
<ul>
<li><code>value</code> : The minimum value found.</li>
<li><code>ele</code> : The element that corresponds to the minimum value.</li>
</ul>
<h3 id="examples">Examples</h3>
<p>Find the node with the minimum weight:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> min = cy.nodes().min(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.data(<span class="hljs-string">'weight'</span>);
});

<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'min val: '</span> + min.value + <span class="hljs-string">' for element '</span> + min.ele.id() );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.max">
								<span class="fn-name">eles.max()</span>  <a href="#eles.max"><span class="fa fa-bookmark"></span></a>
								<span id="collection/building--filtering/eles.max">&nbsp;</span><span id="collection/building--filtering/eles.max">&nbsp;</span><span id="eles.max">&nbsp;</span>
							</div>



							<div class="descr"><p>Find a maximum value and the corresponding element.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.max( <span class="args-summary"><span class="comma">,&nbsp;</span>function(ele, i, eles) [<span class="comma">,&nbsp;</span>thisArg]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">function(ele, i, eles)</span>
													
													<span class="descr"><p>The function that returns the value to compare for each element.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">ele</a></span>
																
																<span class="descr"><p>The current element.</p>
</span>
															</li>

															<li>
																<span class="name">i</span>
																
																<span class="descr"><p>The index of the current element.</p>
</span>
															</li>

															<li>
																<span class="name"><a href="#collection">eles</a></span>
																
																<span class="descr"><p>The collection of elements being searched.</p>
</span>
															</li>

													</ul>
												</li>
												<li>
													<span class="name">thisArg</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>The value for <code>this</code> within the iterating function.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns an object with the following fields:</p>
<ul>
<li><code>value</code> : The maximum value found.</li>
<li><code>ele</code> : The element that corresponds to the maximum value.</li>
</ul>
<h3 id="examples">Examples</h3>
<p>Find the node with the maximum weight:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> max = cy.nodes().max(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.data(<span class="hljs-string">'weight'</span>);
});

<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'max val: '</span> + max.value + <span class="hljs-string">' for element '</span> + max.ele.id() );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="collection/traversing">Traversing <a href="#collection/traversing"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="eles.neighborhood">
								<span class="fn-name">eles.neighborhood()</span> et al <a href="#eles.neighborhood"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/eles.neighborhood">&nbsp;</span><span id="collection/traversing/eles.neighborhood">&nbsp;</span><span id="eles.neighborhood">&nbsp;</span><span id="collection/traversing/eles.openNeighborhood">&nbsp;</span><span id="eles.openNeighborhood">&nbsp;</span><span id="collection/traversing/eles.closedNeighborhood">&nbsp;</span><span id="eles.closedNeighborhood">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the neighbourhood of the elements.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.neighborhood( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>

										<div class="pure-aliases">
											<span class="important-indicator"></span> Aliases:

												<span class="pure-alias">
													<span id="collection/traversing/eles.neighbourhood" class="pure-alias-name">eles.neighbourhood()</span><span class="pure-alias-comma">,</span>
												</span>
										</div>

										<div class="descr"><p>Get the open neighbourhood of the elements.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.openNeighborhood( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>

										<div class="pure-aliases">
											<span class="important-indicator"></span> Aliases:

												<span class="pure-alias">
													<span id="collection/traversing/eles.openNeighbourhood" class="pure-alias-name">eles.openNeighbourhood()</span><span class="pure-alias-comma">,</span>
												</span>
										</div>

										<div class="descr"><p>Get the open neighbourhood of the elements.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.closedNeighborhood( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>

										<div class="pure-aliases">
											<span class="important-indicator"></span> Aliases:

												<span class="pure-alias">
													<span id="collection/traversing/eles.closedNeighbourhood" class="pure-alias-name">eles.closedNeighbourhood()</span><span class="pure-alias-comma">,</span>
												</span>
										</div>

										<div class="descr"><p>Get the closed neighbourhood of the elements.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>The neighbourhood returned by this function is a bit different than the traditional definition of a “neighbourhood”:  This returned neighbourhood includes the edges connecting the collection to the neighbourhood.  This gives you more flexibility.</p>
<p>An <strong>open neighbourhood</strong> is one that <strong>does not</strong> include the original set of elements.  If unspecified, a neighbourhood is open by default.</p>
<p>A <strong>closed neighbourhood</strong> is one that <strong>does</strong> include the original set of elements. </p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).neighborhood();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.components">
								<span class="fn-name">eles.components()</span> et al <a href="#eles.components"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/eles.components">&nbsp;</span><span id="collection/traversing/eles.components">&nbsp;</span><span id="eles.components">&nbsp;</span><span id="collection/traversing/eles.componentsOf">&nbsp;</span><span id="eles.componentsOf">&nbsp;</span><span id="collection/traversing/ele.component">&nbsp;</span><span id="ele.component">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the connected components.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.components()</div>


										<div class="descr"><p>Get the connected components, considering only the elements in the calling collection.  An array of collections is returned, with each collection representing a component.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">eles.componentsOf( <span class="args-summary"><span class="comma">,&nbsp;</span>root</span> )</div>


										<div class="descr"><p>Get the connected components to which the passed elements belong.  The components consider only the subgraph made by the elements in the calling collection.  An array of collections is returned, with each collection representing a component.</p>
</div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">root</a></span>
													
													<span class="descr"><p>The components that contain these elements are returned.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">ele.component()</div>


										<div class="descr"><p>Get the connected component for the calling element.  The component considers all elements in the graph.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.edgesWith">
								<span class="fn-name">nodes.edgesWith()</span>  <a href="#nodes.edgesWith"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/nodes.edgesWith">&nbsp;</span><span id="collection/traversing/nodes.edgesWith">&nbsp;</span><span id="nodes.edgesWith">&nbsp;</span><span id="collection/traversing/nodes.edgesWith">&nbsp;</span><span id="nodes.edgesWith">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the edges connecting the collection to another collection.  Direction of the edges does not matter.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.edgesWith( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The other collection.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">nodes.edgesWith( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>The other collection, specified as a selector which is matched against all elements in the graph.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);
<span class="hljs-keyword">var</span> e = cy.$(<span class="hljs-string">'#e'</span>);

j.edgesWith(e);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.edgesTo">
								<span class="fn-name">nodes.edgesTo()</span>  <a href="#nodes.edgesTo"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/nodes.edgesTo">&nbsp;</span><span id="collection/traversing/nodes.edgesTo">&nbsp;</span><span id="nodes.edgesTo">&nbsp;</span><span id="collection/traversing/nodes.edgesTo">&nbsp;</span><span id="nodes.edgesTo">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the edges coming from the collection (i.e. the source) going to another collection (i.e. the target).</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.edgesTo( <span class="args-summary"><span class="comma">,&nbsp;</span>eles</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#collection">eles</a></span>
													
													<span class="descr"><p>The other collection.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">nodes.edgesTo( <span class="args-summary"><span class="comma">,&nbsp;</span>selector</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													
													<span class="descr"><p>The other collection, specified as a selector which is matched against all elements in the graph.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);
<span class="hljs-keyword">var</span> e = cy.$(<span class="hljs-string">'#e'</span>);

j.edgesTo(e);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="edges.connectedNodes">
								<span class="fn-name">edges.connectedNodes()</span>  <a href="#edges.connectedNodes"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/edges.connectedNodes">&nbsp;</span><span id="collection/traversing/edges.connectedNodes">&nbsp;</span><span id="edges.connectedNodes">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the nodes connected to the edges in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">edges.connectedNodes( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> je = cy.$(<span class="hljs-string">'#je'</span>);

je.connectedNodes();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.connectedEdges">
								<span class="fn-name">nodes.connectedEdges()</span>  <a href="#nodes.connectedEdges"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/nodes.connectedEdges">&nbsp;</span><span id="collection/traversing/nodes.connectedEdges">&nbsp;</span><span id="nodes.connectedEdges">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the edges connected to the nodes in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.connectedEdges( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);

j.connectedEdges();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="edge.source">
								<span class="fn-name">edge.source()</span>  <a href="#edge.source"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/edge.source">&nbsp;</span><span id="collection/traversing/edge.source">&nbsp;</span><span id="edge.source">&nbsp;</span>
							</div>



							<div class="descr"><p>Get source node of this edge.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">edge.source( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> je = cy.$(<span class="hljs-string">'#je'</span>);

je.source();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="edges.sources">
								<span class="fn-name">edges.sources()</span>  <a href="#edges.sources"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/edges.sources">&nbsp;</span><span id="collection/traversing/edges.sources">&nbsp;</span><span id="edges.sources">&nbsp;</span>
							</div>



							<div class="descr"><p>Get source nodes connected to the edges in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">edges.sources( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> edges = cy.$(<span class="hljs-string">'#je, #kg'</span>);

edges.sources();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="edge.target">
								<span class="fn-name">edge.target()</span>  <a href="#edge.target"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/edge.target">&nbsp;</span><span id="collection/traversing/edge.target">&nbsp;</span><span id="edge.target">&nbsp;</span>
							</div>



							<div class="descr"><p>Get target node of this edge.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">edge.target( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> je = cy.$(<span class="hljs-string">'#je'</span>);

je.target();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="edges.targets">
								<span class="fn-name">edges.targets()</span>  <a href="#edges.targets"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/edges.targets">&nbsp;</span><span id="collection/traversing/edges.targets">&nbsp;</span><span id="edges.targets">&nbsp;</span>
							</div>



							<div class="descr"><p>Get target nodes connected to the edges in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">edges.targets( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> edges = cy.$(<span class="hljs-string">'#je, #kg'</span>);

edges.targets();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="edges.parallelEdges">
								<span class="fn-name">edges.parallelEdges()</span>  <a href="#edges.parallelEdges"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/edges.parallelEdges">&nbsp;</span><span id="collection/traversing/edges.parallelEdges">&nbsp;</span><span id="edges.parallelEdges">&nbsp;</span>
							</div>



							<div class="descr"><p>Get edges parallel to those in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">edges.parallelEdges( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Two edges are said to be parallel if they connect the same two nodes.  Any two parallel edges may connect nodes in the same direction, in which case the edges share the same source and target.  They may alternatively connect nodes in the opposite direction, in which case the source and target are reversed in the second edge.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#je'</span>).parallelEdges();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="edges.codirectedEdges">
								<span class="fn-name">edges.codirectedEdges()</span>  <a href="#edges.codirectedEdges"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/edges.codirectedEdges">&nbsp;</span><span id="collection/traversing/edges.codirectedEdges">&nbsp;</span><span id="edges.codirectedEdges">&nbsp;</span>
							</div>



							<div class="descr"><p>Get edges codirected to those in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">edges.codirectedEdges( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Two edges are said to be codirected if they connect the same two nodes in the same direction: The edges have the same source and target.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#je'</span>).codirectedEdges(); <span class="hljs-comment">// only self in this case</span></code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.roots">
								<span class="fn-name">nodes.roots()</span>  <a href="#nodes.roots"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/nodes.roots">&nbsp;</span><span id="collection/traversing/nodes.roots">&nbsp;</span><span id="nodes.roots">&nbsp;</span>
							</div>



							<div class="descr"><p>From the set of calling nodes, get the nodes which are roots (i.e. no incoming edges, as in a directed acyclic graph).</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.roots( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.leaves">
								<span class="fn-name">nodes.leaves()</span>  <a href="#nodes.leaves"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/nodes.leaves">&nbsp;</span><span id="collection/traversing/nodes.leaves">&nbsp;</span><span id="nodes.leaves">&nbsp;</span>
							</div>



							<div class="descr"><p>From the set of calling nodes, get the nodes which are leaves (i.e. no outgoing edges, as in a directed acyclic graph).</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.leaves( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.outgoers">
								<span class="fn-name">nodes.outgoers()</span>  <a href="#nodes.outgoers"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/nodes.outgoers">&nbsp;</span><span id="collection/traversing/nodes.outgoers">&nbsp;</span><span id="nodes.outgoers">&nbsp;</span>
							</div>



							<div class="descr"><p>Get edges (and their targets) coming out of the nodes in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.outgoers( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Get outgoers of <code>j</code>:</p>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).outgoers();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.successors">
								<span class="fn-name">nodes.successors()</span>  <a href="#nodes.successors"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/nodes.successors">&nbsp;</span><span id="collection/traversing/nodes.successors">&nbsp;</span><span id="nodes.successors">&nbsp;</span>
							</div>



							<div class="descr"><p>Recursively get edges (and their targets) coming out of the nodes in the collection (i.e. the outgoers, the outgoers&#39; outgoers, ...).</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.successors( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Get successors of <code>j</code>:</p>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).successors();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.incomers">
								<span class="fn-name">nodes.incomers()</span>  <a href="#nodes.incomers"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/nodes.incomers">&nbsp;</span><span id="collection/traversing/nodes.incomers">&nbsp;</span><span id="nodes.incomers">&nbsp;</span>
							</div>



							<div class="descr"><p>Get edges (and their sources) coming into the nodes in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.incomers( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Get incomers of <code>j</code>:</p>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).incomers();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.predecessors">
								<span class="fn-name">nodes.predecessors()</span>  <a href="#nodes.predecessors"><span class="fa fa-bookmark"></span></a>
								<span id="collection/traversing/nodes.predecessors">&nbsp;</span><span id="collection/traversing/nodes.predecessors">&nbsp;</span><span id="nodes.predecessors">&nbsp;</span>
							</div>



							<div class="descr"><p>Recursively get edges (and their sources) coming into the nodes in the collection (i.e. the incomers, the incomers&#39; incomers, ...).</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.predecessors( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An optional selector that is used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>Get predecessors of <code>j</code>:</p>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).predecessors();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="collection/search">Search <a href="#collection/search"><span class="fa fa-bookmark"></span></a></h2>


						<!-- maintain the old algorithms link -->
<div id="collection/algorithms"></div>



						<div class="function">
							<div class="name" id="eles.breadthFirstSearch">
								<span class="fn-name">eles.breadthFirstSearch()</span>  <a href="#eles.breadthFirstSearch"><span class="fa fa-bookmark"></span></a>
								<span id="collection/search/eles.breadthFirstSearch">&nbsp;</span><span id="collection/search/eles.bfs">&nbsp;</span><span id="eles.bfs">&nbsp;</span><span id="collection/search/eles.breadthFirstSearch">&nbsp;</span><span id="eles.breadthFirstSearch">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/search/eles.bfs" class="pure-alias-name">eles.bfs()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Perform a <a href="https://en.wikipedia.org/wiki/Breadth-first_search">breadth-first search</a> within the elements in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.breadthFirstSearch( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">root</a></span>
																
																<span class="descr"><p>The root nodes (selector or collection) to start the search from.</p>
</span>
															</li>

															<li>
																<span class="name">visit: function(v, e, u, i, depth)</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A handler function that is called when a node is visited in the search.  The handler returns <code>true</code> when it finds the desired node, and it returns <code>false</code> to cancel the search.</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name">v</span>
																	
																	<span class="descr"><p>The current node.</p>
</span>
																</li>


																<li>
																	<span class="name">e</span>
																	
																	<span class="descr"><p>The edge connecting the previous node to the current node.</p>
</span>
																</li>


																<li>
																	<span class="name">u</span>
																	
																	<span class="descr"><p>The previous node.</p>
</span>
																</li>


																<li>
																	<span class="name">i</span>
																	
																	<span class="descr"><p>The index indicating this node is the ith visited node.</p>
</span>
																</li>


																<li>
																	<span class="name">depth</span>
																	
																	<span class="descr"><p>How many edge hops away this node is from the root nodes.</p>
</span>
																</li>


															</ul>
															<li>
																<span class="name">directed</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the algorithm should only go along edges from source to target (default <code>false</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function performs a breadth-first search on only the subset of the graph in the calling collection.</p>
<p>This function returns an object that contains two collections (<code>{ path: eles, found: node }</code>), the node found by the search and the path of the search:</p>
<ul>
<li>If no node was found, then <code>found</code> is empty.</li>
<li>If your handler function returns <code>false</code>, then the only the path up to that point is returned.</li>
<li>The path returned includes edges such that if <code>path[i]</code> is a node, then <code>path[i - 1]</code> is the edge used to get to that node.</li>
</ul>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> bfs = cy.elements().bfs({
  <span class="hljs-attr">roots</span>: <span class="hljs-string">'#e'</span>,
  <span class="hljs-attr">visit</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">v, e, u, i, depth</span>)</span>{
    <span class="hljs-built_in">console</span>.log( <span class="hljs-string">'visit '</span> + v.id() );

    <span class="hljs-comment">// example of finding desired node</span>
    <span class="hljs-keyword">if</span>( v.data(<span class="hljs-string">'weight'</span>) &gt; <span class="hljs-number">70</span> ){
      <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
    }

    <span class="hljs-comment">// example of exiting search early</span>
    <span class="hljs-keyword">if</span>( v.data(<span class="hljs-string">'weight'</span>) &lt; <span class="hljs-number">0</span> ){
      <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
    }
  },
  <span class="hljs-attr">directed</span>: <span class="hljs-literal">false</span>
});

<span class="hljs-keyword">var</span> path = bfs.path; <span class="hljs-comment">// path to found node</span>
<span class="hljs-keyword">var</span> found = bfs.found; <span class="hljs-comment">// found node</span>

<span class="hljs-comment">// select the path</span>
path.select();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.depthFirstSearch">
								<span class="fn-name">eles.depthFirstSearch()</span>  <a href="#eles.depthFirstSearch"><span class="fa fa-bookmark"></span></a>
								<span id="collection/search/eles.depthFirstSearch">&nbsp;</span><span id="collection/search/eles.dfs">&nbsp;</span><span id="eles.dfs">&nbsp;</span><span id="collection/search/eles.depthFirstSearch">&nbsp;</span><span id="eles.depthFirstSearch">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/search/eles.dfs" class="pure-alias-name">eles.dfs()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Perform a <a href="https://en.wikipedia.org/wiki/Depth-first_search">depth-first search</a> within the elements in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.depthFirstSearch( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">root</a></span>
																
																<span class="descr"><p>The root nodes (selector or collection) to start the search from.</p>
</span>
															</li>

															<li>
																<span class="name">visit: function(v, e, u, i, depth)</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A handler function that is called when a node is visited in the search.  The handler returns <code>true</code> when it finds the desired node, and it returns <code>false</code> to cancel the search.</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name">v</span>
																	
																	<span class="descr"><p>The current node.</p>
</span>
																</li>


																<li>
																	<span class="name">e</span>
																	
																	<span class="descr"><p>The edge connecting the previous node to the current node.</p>
</span>
																</li>


																<li>
																	<span class="name">u</span>
																	
																	<span class="descr"><p>The previous node.</p>
</span>
																</li>


																<li>
																	<span class="name">i</span>
																	
																	<span class="descr"><p>The index indicating this node is the ith visited node.</p>
</span>
																</li>


																<li>
																	<span class="name">depth</span>
																	
																	<span class="descr"><p>How many edge hops away this node is from the root nodes.</p>
</span>
																</li>


															</ul>
															<li>
																<span class="name">directed</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the algorithm should only go along edges from source to target (default <code>false</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function performs a depth-first search on only the subset of the graph in the calling collection.</p>
<p>This function returns an object that contains two collections (<code>{ path: eles, found: node }</code>), the node found by the search and the path of the search:</p>
<ul>
<li>If no node was found, then <code>found</code> is empty.</li>
<li>If your handler function returns <code>false</code>, then the only the path up to that point is returned.</li>
<li>The path returned includes edges such that if <code>path[i]</code> is a node, then <code>path[i - 1]</code> is the edge used to get to that node.</li>
</ul>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> dfs = cy.elements().dfs({
  <span class="hljs-attr">roots</span>: <span class="hljs-string">'#e'</span>,
  <span class="hljs-attr">visit</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">v, e, u, i, depth</span>)</span>{
    <span class="hljs-built_in">console</span>.log( <span class="hljs-string">'visit '</span> + v.id() );

    <span class="hljs-comment">// example of finding desired node</span>
    <span class="hljs-keyword">if</span>( v.data(<span class="hljs-string">'weight'</span>) &gt; <span class="hljs-number">70</span> ){
      <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
    }

    <span class="hljs-comment">// example of exiting search early</span>
    <span class="hljs-keyword">if</span>( v.data(<span class="hljs-string">'weight'</span>) &lt; <span class="hljs-number">0</span> ){
      <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
    }
  },
  <span class="hljs-attr">directed</span>: <span class="hljs-literal">false</span>
});

<span class="hljs-keyword">var</span> path = dfs.path; <span class="hljs-comment">// path to found node</span>
<span class="hljs-keyword">var</span> found = dfs.found; <span class="hljs-comment">// found node</span>

<span class="hljs-comment">// select the path</span>
path.select();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.dijkstra">
								<span class="fn-name">eles.dijkstra()</span>  <a href="#eles.dijkstra"><span class="fa fa-bookmark"></span></a>
								<span id="collection/search/eles.dijkstra">&nbsp;</span><span id="collection/search/eles.dijkstra">&nbsp;</span><span id="eles.dijkstra">&nbsp;</span>
							</div>



							<div class="descr"><p>Perform <a href="https://en.wikipedia.org/wiki/Dijkstra%27s_algorithm">Dijkstra&#39;s</a> algorithm on the elements in the collection.  This finds the shortest paths to all other nodes in the collection from the root node.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.dijkstra( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">root</a></span>
																
																<span class="descr"><p>The root node (selector or collection) where the algorithm starts.</p>
</span>
															</li>

															<li>
																<span class="name">weight: function(edge)</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A function that returns the positive numeric weight for the edge.  The weight indicates the cost of going from one node to another node.</p>
</span>
															</li>

															<li>
																<span class="name">directed</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the algorithm should only go along edges from source to target (default <code>false</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function performs Dijkstra’s algorithm on only the subset of the graph in the calling collection.</p>
<p>This function returns an object of the following form:</p>
<pre><code class="language-js">{
  <span class="hljs-attr">distanceTo</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-comment">/* impl */</span> }
  pathTo: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-comment">/* impl */</span> }
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p><code>distanceTo(node)</code> returns the distance from the source node to <code>node</code>, and <code>pathTo(node)</code> returns a collection containing the shortest path from the source node to <code>node</code>.  The path starts with the source node and includes the edges between the nodes in the path such that if <code>pathTo(node)[i]</code> is an edge, then <code>pathTo(node)[i-1]</code> is the previous node in the path and <code>pathTo(node)[i+1]</code> is the next node in the path.</p>
<p>If no weight function is defined, a constant weight of 1 is used for each edge. </p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> dijkstra = cy.elements().dijkstra(<span class="hljs-string">'#e'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">edge</span>)</span>{
  <span class="hljs-keyword">return</span> edge.data(<span class="hljs-string">'weight'</span>);
});

<span class="hljs-keyword">var</span> pathToJ = dijkstra.pathTo( cy.$(<span class="hljs-string">'#j'</span>) );
<span class="hljs-keyword">var</span> distToJ = dijkstra.distanceTo( cy.$(<span class="hljs-string">'#j'</span>) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.aStar">
								<span class="fn-name">eles.aStar()</span>  <a href="#eles.aStar"><span class="fa fa-bookmark"></span></a>
								<span id="collection/search/eles.aStar">&nbsp;</span><span id="collection/search/eles.aStar">&nbsp;</span><span id="eles.aStar">&nbsp;</span>
							</div>



							<div class="descr"><p>Perform the <a href="https://en.wikipedia.org/wiki/A*_search_algorithm">A*</a> search algorithm on the elements in the collection. This finds the shortest path from the root node to the goal node.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.aStar( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">root</a></span>
																
																<span class="descr"><p>The root node (selector or collection) where the search starts.</p>
</span>
															</li>

															<li>
																<span class="name">goal</span>
																
																<span class="descr"><p>The goal node (selector or collection) where the search ends.</p>
</span>
															</li>

															<li>
																<span class="name">weight: function(edge)</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A function that returns the positive numeric weight for the edge.  The weight indicates the cost of going from one node to another node.</p>
</span>
															</li>

															<li>
																<span class="name">heuristic: function(node)</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A function that returns an estimation (cannot be overestimation) on the shortest distance  from the current node to the goal.</p>
</span>
															</li>

															<li>
																<span class="name">directed</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the algorithm should only go along edges from source to target (default <code>false</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function performs A* search on only the subset of the graph in the calling collection.</p>
<p>This function returns an object of the following form:</p>
<pre><code class="language-js">{
  found, <span class="hljs-comment">/* true or false */</span>
  distance, <span class="hljs-comment">/* Distance of the shortest path, if found */</span>
  path <span class="hljs-comment">/* Ordered collection of elements in the shortest path, if found */</span>
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Regarding optional options:</p>
<ul>
<li>If no weight function is defined, a constant weight of 1 is used for each edge. </li>
<li>If no heuristic function is provided, a constant null function will be used, turning this into the same behaviour as Dijkstra’s algorithm. The heuristic should be monotonic (also called consistent) in addition to being ‘admissible’.</li>
</ul>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> aStar = cy.elements().aStar({ <span class="hljs-attr">root</span>: <span class="hljs-string">"#j"</span>, <span class="hljs-attr">goal</span>: <span class="hljs-string">"#e"</span> });

aStar.path.select();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.floydWarshall">
								<span class="fn-name">eles.floydWarshall()</span>  <a href="#eles.floydWarshall"><span class="fa fa-bookmark"></span></a>
								<span id="collection/search/eles.floydWarshall">&nbsp;</span><span id="collection/search/eles.floydWarshall">&nbsp;</span><span id="eles.floydWarshall">&nbsp;</span>
							</div>



							<div class="descr"><p>Perform the <a href="https://en.wikipedia.org/wiki/Floyd%E2%80%93Warshall_algorithm">Floyd-Warshall</a> search algorithm on the elements in the collection. This finds the shortest path between all pairs of nodes.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.floydWarshall( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name">weight: function(edge)</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A function that returns the numeric weight for the edge.  The weight indicates the cost of going from one node to another node.  The weight may be positive or negative, but no negative cycles are allowed.</p>
</span>
															</li>

															<li>
																<span class="name">directed</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the algorithm should only go along edges from source to target (default <code>false</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns an object of the following form:</p>
<pre><code class="language-js">{
  <span class="hljs-comment">/* function that computes the shortest path between 2 nodes 
  (either objects or selector strings) */</span>
  path: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> fromNode, toNode </span>)</span>{ <span class="hljs-comment">/* impl */</span> }, 

  <span class="hljs-comment">/* function that computes the shortest distance between 2 nodes 
  (either objects or selector strings) */</span>
  distance: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> fromNode, toNode </span>)</span>{ <span class="hljs-comment">/* impl */</span> }
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>If no weight function is defined, a constant weight of 1 is used for each edge. </p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> fw = cy.elements().floydWarshall();

fw.path(<span class="hljs-string">'#k'</span>, <span class="hljs-string">'#g'</span>).select();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.bellmanFord">
								<span class="fn-name">eles.bellmanFord()</span>  <a href="#eles.bellmanFord"><span class="fa fa-bookmark"></span></a>
								<span id="collection/search/eles.bellmanFord">&nbsp;</span><span id="collection/search/eles.bellmanFord">&nbsp;</span><span id="eles.bellmanFord">&nbsp;</span>
							</div>



							<div class="descr"><p>Perform the <a href="https://en.wikipedia.org/wiki/Bellman%E2%80%93Ford_algorithm">Bellman-Ford</a> search algorithm on the elements in the collection. This finds the shortest path from the starting node to all other nodes in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.bellmanFord( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">root</a></span>
																
																<span class="descr"><p>The root node (selector or collection) where the search starts.</p>
</span>
															</li>

															<li>
																<span class="name">weight: function(edge)</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A function that returns the numeric weight for the edge.  The weight indicates the cost of going from one node to another node.  The weight may be positive or negative.</p>
</span>
															</li>

															<li>
																<span class="name">directed</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the algorithm should only go along edges from source to target (default <code>false</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns an object of the following form:</p>
<pre><code class="language-js">{
  <span class="hljs-comment">/* function that computes the shortest path from root node to the argument node
  (either objects or selector string) */</span>
  pathTo: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">node</span>)</span>{ <span class="hljs-comment">/* impl */</span> }, 

  <span class="hljs-comment">/* function that computes the shortest distance from root node to argument node
  (either objects or selector string) */</span>
  distanceTo: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">node</span>)</span>{ <span class="hljs-comment">/* impl */</span> }, 

  <span class="hljs-comment">/* true/false. If true, pathTo and distanceTo will be undefined */</span>
  hasNegativeWeightCycle 
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>If no weight function is defined, a constant weight of 1 is used for each edge. </p>
<p>The Bellman-Ford algorithm is good at detecting negative weight cycles, but it can not return path or distance results if it finds them.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> bf = cy.elements().bellmanFord({ <span class="hljs-attr">root</span>: <span class="hljs-string">"#j"</span> });

bf.pathTo(<span class="hljs-string">'#g'</span>).select();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.hierholzer">
								<span class="fn-name">eles.hierholzer()</span>  <a href="#eles.hierholzer"><span class="fa fa-bookmark"></span></a>
								<span id="collection/search/eles.hierholzer">&nbsp;</span><span id="collection/search/eles.hierholzer">&nbsp;</span><span id="eles.hierholzer">&nbsp;</span>
							</div>



							<div class="descr"><p>Perform the <a href="https://en.wikipedia.org/wiki/Eulerian_path#Hierholzer&#39;s_algorithm">Hierholzer</a> search algorithm on the elements in the collection. This finds Eulerian trails and circuits.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.hierholzer( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">root</a></span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>The root node (selector or collection) where the search starts.</p>
</span>
															</li>

															<li>
																<span class="name">directed</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the algorithm should only go along edges from source to target (default <code>false</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function performs Hierholzer’s algorithm on only the subset of the graph in the calling collection.</p>
<p>This function returns an object of the following form:</p>
<pre><code class="language-js">{
  found, <span class="hljs-comment">/* true or false */</span>
  trail <span class="hljs-comment">/* Ordered collection of elements in the Eulerian trail or cycle, if found */</span>
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Regarding optional options:</p>
<ul>
<li>If no root node is provided, the first node in the collection will be taken as the starting node in the algorithm.</li>
<li>The graph is assumed to be undirected unless specified otherwise.</li>
</ul>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> hierholzer = cy.elements().hierholzer({ <span class="hljs-attr">root</span>: <span class="hljs-string">"#k"</span>, <span class="hljs-attr">directed</span>: <span class="hljs-literal">true</span> });

hierholzer.trail.select();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="collection/spanning">Spanning <a href="#collection/spanning"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="eles.kruskal">
								<span class="fn-name">eles.kruskal()</span>  <a href="#eles.kruskal"><span class="fa fa-bookmark"></span></a>
								<span id="collection/spanning/eles.kruskal">&nbsp;</span><span id="collection/spanning/eles.kruskal">&nbsp;</span><span id="eles.kruskal">&nbsp;</span>
							</div>



							<div class="descr"><p>Perform <a href="https://en.wikipedia.org/wiki/Kruskal%27s_algorithm">Kruskal&#39;s</a> algorithm on the elements in the collection, returning the minimum spanning tree, assuming undirected edges.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.kruskal( <span class="args-summary"> [<span class="comma">,&nbsp;</span>function(edge)]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">function(edge)</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A function that returns the positive numeric weight for the edge.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function runs Kruskal’s algorithm on the subset of the graph in the calling collection.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js">cy.elements().kruskal();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="collection/cut">Cut <a href="#collection/cut"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="eles.kargerStein">
								<span class="fn-name">eles.kargerStein()</span>  <a href="#eles.kargerStein"><span class="fa fa-bookmark"></span></a>
								<span id="collection/cut/eles.kargerStein">&nbsp;</span>
							</div>



							<div class="descr"><p>Finds the minimum cut in a graph using the <a href="https://en.wikipedia.org/wiki/Karger%27s_algorithm#Karger.E2.80.93Stein_algorithm">Karger-Stein</a> algorithm. The optimal result is found with a high probability, but without guarantee.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns an object of the following form:</p>
<pre><code class="language-js">{
  <span class="hljs-comment">/* Collection of edges that are in the cut */</span>
  cut,

  <span class="hljs-comment">/* Array of collections corresponding to the components
  containing each disjoint subset of nodes defined by the cut */</span>
  components
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> ks = cy.elements().kargerStein();

ks.cut.select();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.hopcroftTarjanBiconnected">
								<span class="fn-name">eles.hopcroftTarjanBiconnected()</span>  <a href="#eles.hopcroftTarjanBiconnected"><span class="fa fa-bookmark"></span></a>
								<span id="collection/cut/eles.hopcroftTarjanBiconnected">&nbsp;</span><span id="collection/cut/eles.hopcroftTarjanBiconnectedComponents">&nbsp;</span><span id="eles.hopcroftTarjanBiconnectedComponents">&nbsp;</span><span id="collection/cut/eles.htb">&nbsp;</span><span id="eles.htb">&nbsp;</span><span id="collection/cut/eles.htbc">&nbsp;</span><span id="eles.htbc">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/cut/eles.hopcroftTarjanBiconnectedComponents" class="pure-alias-name">eles.hopcroftTarjanBiconnectedComponents()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/cut/eles.htb" class="pure-alias-name">eles.htb()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/cut/eles.htbc" class="pure-alias-name">eles.htbc()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Finds the <a href="https://en.wikipedia.org/wiki/Biconnected_component">biconnected components</a> in an undirected graph, as well as their respective cut vertices, using an algorithm due to Hopcroft and Tarjan.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function identifies biconnected components and cut vertices only within the subset of the graph in the calling collection.</p>
<p>This function returns an object of the following form:</p>
<pre><code class="language-js">{
  cut, <span class="hljs-comment">/* Collection of nodes identified as cut vertices */</span>
  components <span class="hljs-comment">/* An array of collections corresponding to each biconnected component */</span>
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> ht = cy.elements().htbc();

ht.components[<span class="hljs-number">0</span>].select();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.tarjanStronglyConnected">
								<span class="fn-name">eles.tarjanStronglyConnected()</span>  <a href="#eles.tarjanStronglyConnected"><span class="fa fa-bookmark"></span></a>
								<span id="collection/cut/eles.tarjanStronglyConnected">&nbsp;</span><span id="collection/cut/eles.tarjanStronglyConnectedComponents">&nbsp;</span><span id="eles.tarjanStronglyConnectedComponents">&nbsp;</span><span id="collection/cut/eles.tsc">&nbsp;</span><span id="eles.tsc">&nbsp;</span><span id="collection/cut/eles.tscc">&nbsp;</span><span id="eles.tscc">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/cut/eles.tarjanStronglyConnectedComponents" class="pure-alias-name">eles.tarjanStronglyConnectedComponents()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/cut/eles.tsc" class="pure-alias-name">eles.tsc()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/cut/eles.tscc" class="pure-alias-name">eles.tscc()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Finds the <a href="https://en.wikipedia.org/wiki/Strongly_connected_component">strongly connected components</a> of a directed graph using Tarjan&#39;s algorithm.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function identifies strongly connected components only within the subset of the graph in the calling collection.</p>
<p>This function returns an object of the following form:</p>
<pre><code class="language-js">{
  cut, <span class="hljs-comment">/* Collection of edges which adjoin pairs of strongly connected components */</span>
  components <span class="hljs-comment">/* Array of collections corresponding to each strongly connected component */</span>
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> tsc = cy.elements().tarjanStronglyConnected();

tsc.components[<span class="hljs-number">0</span>].select();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="collection/centrality">Centrality <a href="#collection/centrality"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="eles.degreeCentrality">
								<span class="fn-name">eles.degreeCentrality()</span>  <a href="#eles.degreeCentrality"><span class="fa fa-bookmark"></span></a>
								<span id="collection/centrality/eles.degreeCentrality">&nbsp;</span><span id="collection/centrality/eles.dc">&nbsp;</span><span id="eles.dc">&nbsp;</span><span id="collection/centrality/eles.degreeCentrality">&nbsp;</span><span id="eles.degreeCentrality">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/centrality/eles.dc" class="pure-alias-name">eles.dc()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Considering only the elements in the calling collection, calculate the <a href="https://en.wikipedia.org/wiki/Centrality#Degree_centrality">degree centrality</a> of the specified root node.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.degreeCentrality( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">root</a></span>
																
																<span class="descr"><p>The root node (selector or collection) for which the centrality calculation is made.</p>
</span>
															</li>

															<li>
																<span class="name">weight: function(edge)</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A function that returns the positive weight for the edge.  The weight indicates the importance of the edge, with a high value representing high importance.</p>
</span>
															</li>

															<li>
																<span class="name">alpha</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>The alpha value for the centrality calculation, ranging on [0, 1].  With value 0 (default), disregards edge weights and solely uses number of edges in the centrality calculation.  With value 1, disregards number of edges and solely uses the edge weights in the centrality calculation.</p>
</span>
															</li>

															<li>
																<span class="name">directed</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the directed indegree and outdegree centrality is calculated (<code>true</code>) or whether the undirected centrality is calculated (<code>false</code>, default).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>For <code>options.directed: false</code>, this function returns an object of the following form:</p>
<pre><code class="language-js">{
  degree <span class="hljs-comment">/* the degree centrality of the root node */</span>
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>For <code>options.directed: true</code>, this function returns an object of the following form:</p>
<pre><code class="language-js">{
  indegree, <span class="hljs-comment">/* the indegree centrality of the root node */</span>
  outdegree <span class="hljs-comment">/* the outdegree centrality of the root node */</span>
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-built_in">console</span>.log( <span class="hljs-string">'dc of j: '</span> + cy.$().dc({ <span class="hljs-attr">root</span>: <span class="hljs-string">'#j'</span> }).degree );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.degreeCentralityNormalized">
								<span class="fn-name">eles.degreeCentralityNormalized()</span>  <a href="#eles.degreeCentralityNormalized"><span class="fa fa-bookmark"></span></a>
								<span id="collection/centrality/eles.degreeCentralityNormalized">&nbsp;</span><span id="collection/centrality/eles.dcn">&nbsp;</span><span id="eles.dcn">&nbsp;</span><span id="collection/centrality/eles.degreeCentralityNormalised">&nbsp;</span><span id="eles.degreeCentralityNormalised">&nbsp;</span><span id="collection/centrality/eles.degreeCentralityNormalized">&nbsp;</span><span id="eles.degreeCentralityNormalized">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/centrality/eles.dcn" class="pure-alias-name">eles.dcn()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/centrality/eles.degreeCentralityNormalised" class="pure-alias-name">eles.degreeCentralityNormalised()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Considering only the elements in the calling collection, calculate the normalised <a href="https://en.wikipedia.org/wiki/Centrality#Degree_centrality">degree centrality</a> of the nodes.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.degreeCentralityNormalized( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name">weight: function(edge)</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A function that returns the positive weight for the edge.  The weight indicates the importance of the edge, with a high value representing high importance.</p>
</span>
															</li>

															<li>
																<span class="name">alpha</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>The alpha value for the centrality calculation, ranging on [0, 1].  With value 0 (default), disregards edge weights and solely uses number of edges in the centrality calculation.  With value 1, disregards number of edges and solely uses the edge weights in the centrality calculation.</p>
</span>
															</li>

															<li>
																<span class="name">directed</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the directed indegree and outdegree centrality is calculated (<code>true</code>) or whether the undirected centrality is calculated (<code>false</code>, default).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>For <code>options.directed: false</code>, this function returns an object of the following form:</p>
<pre><code class="language-js">{
  <span class="hljs-comment">/* the normalised degree centrality of the specified node */</span>
  degree: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-comment">/* impl */</span> }
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>For <code>options.directed: true</code>, this function returns an object of the following form:</p>
<pre><code class="language-js">{
  <span class="hljs-comment">/* the normalised indegree centrality of the specified node */</span>
  indegree: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-comment">/* impl */</span> },

  <span class="hljs-comment">/* the normalised outdegree centrality of the specified node */</span> 
  outdegree: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-comment">/* impl */</span> }
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> dcn = cy.$().dcn();
<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'dcn of j: '</span> + dcn.degree(<span class="hljs-string">'#j'</span>) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.closenessCentrality">
								<span class="fn-name">eles.closenessCentrality()</span>  <a href="#eles.closenessCentrality"><span class="fa fa-bookmark"></span></a>
								<span id="collection/centrality/eles.closenessCentrality">&nbsp;</span><span id="collection/centrality/eles.cc">&nbsp;</span><span id="eles.cc">&nbsp;</span><span id="collection/centrality/eles.closenessCentrality">&nbsp;</span><span id="eles.closenessCentrality">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/centrality/eles.cc" class="pure-alias-name">eles.cc()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Considering only the elements in the calling collection, calculate the <a href="https://en.wikipedia.org/wiki/Closeness_centrality">closeness centrality</a> of the specified root node.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.closenessCentrality( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#collection">root</a></span>
																
																<span class="descr"><p>The root node (selector or collection) for which the centrality calculation is made.</p>
</span>
															</li>

															<li>
																<span class="name">weight: function(edge)</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A function that returns the positive weight for the edge.  The weight indicates the importance of the edge, with a high value representing high importance.</p>
</span>
															</li>

															<li>
																<span class="name">directed</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the algorithm operates on edges in a directed manner from source to target (<code>true</code>) or whether the algorithm operates in an undirected manner (<code>false</code>, default).</p>
</span>
															</li>

															<li>
																<span class="name">harmonic</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the algorithm calculates the harmonic mean (<code>true</code>, default) or the arithmetic mean (<code>false</code>) of distances.  The harmonic mean is very useful for graphs that are not strongly connected.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function directly returns the numerical closeness centrality value for the specified root node.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-built_in">console</span>.log( <span class="hljs-string">'cc of j: '</span> + cy.$().cc({ <span class="hljs-attr">root</span>: <span class="hljs-string">'#j'</span> }) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.closenessCentralityNormalized">
								<span class="fn-name">eles.closenessCentralityNormalized()</span>  <a href="#eles.closenessCentralityNormalized"><span class="fa fa-bookmark"></span></a>
								<span id="collection/centrality/eles.closenessCentralityNormalized">&nbsp;</span><span id="collection/centrality/eles.ccn">&nbsp;</span><span id="eles.ccn">&nbsp;</span><span id="collection/centrality/eles.closenessCentralityNormalised">&nbsp;</span><span id="eles.closenessCentralityNormalised">&nbsp;</span><span id="collection/centrality/eles.closenessCentralityNormalized">&nbsp;</span><span id="eles.closenessCentralityNormalized">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/centrality/eles.ccn" class="pure-alias-name">eles.ccn()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="collection/centrality/eles.closenessCentralityNormalised" class="pure-alias-name">eles.closenessCentralityNormalised()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Considering only the elements in the calling collection, calculate the <a href="https://en.wikipedia.org/wiki/Closeness_centrality">closeness centrality</a> of the nodes.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.closenessCentralityNormalized( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name">weight: function(edge)</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A function that returns the positive weight for the edge.  The weight indicates the importance of the edge, with a high value representing high importance.</p>
</span>
															</li>

															<li>
																<span class="name">directed</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the algorithm operates on edges in a directed manner from source to target (<code>true</code>) or whether the algorithm operates in an undirected manner (<code>false</code>, default).</p>
</span>
															</li>

															<li>
																<span class="name">harmonic</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the algorithm calculates the harmonic mean (<code>true</code>, default) or the arithmetic mean (<code>false</code>) of distances.  The harmonic mean is very useful for graphs that are not strongly connected.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns an object of the form:</p>
<pre><code class="language-js">{
  <span class="hljs-comment">/* returns the normalised closeness centrality of the specified node */</span>
  closeness: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-comment">/* impl */</span> }
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> ccn = cy.$().ccn();
<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'ccn of j: '</span> + ccn.closeness(<span class="hljs-string">'#j'</span>) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.betweennessCentrality">
								<span class="fn-name">eles.betweennessCentrality()</span>  <a href="#eles.betweennessCentrality"><span class="fa fa-bookmark"></span></a>
								<span id="collection/centrality/eles.betweennessCentrality">&nbsp;</span><span id="collection/centrality/eles.bc">&nbsp;</span><span id="eles.bc">&nbsp;</span><span id="collection/centrality/eles.betweennessCentrality">&nbsp;</span><span id="eles.betweennessCentrality">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/centrality/eles.bc" class="pure-alias-name">eles.bc()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Considering only the elements in the calling collection, calculate the <a href="https://en.wikipedia.org/wiki/Betweenness_centrality">betweenness centrality</a> of the nodes.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.betweennessCentrality( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name">weight: function(edge)</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A function that returns the positive weight for the edge.  The weight indicates the importance of the edge, with a high value representing high importance.</p>
</span>
															</li>

															<li>
																<span class="name">directed</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A boolean indicating whether the algorithm operates on edges in a directed manner from source to target (<code>true</code>) or whether the algorithm operates in an undirected manner (<code>false</code>, default).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns an object of the form:</p>
<pre><code class="language-js">{
  <span class="hljs-comment">/* returns the betweenness centrality of the specified node */</span>
  betweenness: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-comment">/* impl */</span> },

  <span class="hljs-comment">/* returns the normalised betweenness centrality of the specified node */</span>
  betweennessNormalized: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-comment">/* impl */</span> }
  <span class="hljs-comment">/* alias : betweennessNormalised() */</span>
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> bc = cy.$().bc();
<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'bc of j: '</span> + bc.betweenness(<span class="hljs-string">'#j'</span>) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="eles.pageRank">
								<span class="fn-name">eles.pageRank()</span>  <a href="#eles.pageRank"><span class="fa fa-bookmark"></span></a>
								<span id="collection/centrality/eles.pageRank">&nbsp;</span><span id="collection/centrality/eles.pageRank">&nbsp;</span><span id="eles.pageRank">&nbsp;</span>
							</div>



							<div class="descr"><p>Rank the nodes in the collection using the <a href="https://en.wikipedia.org/wiki/PageRank">Page Rank</a> algorithm.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.pageRank( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name">dampingFactor</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>The <a href="https://en.wikipedia.org/wiki/PageRank#Damping_factor">damping factor</a>, affecting how long the algorithm goes along the topology of the graph (default <code>0.8</code>).</p>
</span>
															</li>

															<li>
																<span class="name">precision</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>Numeric parameter that represents the required precision (default <code>0.000001</code>).  The algorithm stops when the difference between iterations is this value or less.</p>
</span>
															</li>

															<li>
																<span class="name">iterations</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>Maximum number of iterations to perform (default <code>200</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>This function returns an object of the following form:</p>
<pre><code class="language-js">{
  <span class="hljs-comment">/* function that computes the rank of a given node (either object or selector string) */</span>
  rank: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-comment">/* impl */</span> } 
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> pr = cy.elements().pageRank();

<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'g rank: '</span> + pr.rank(<span class="hljs-string">'#g'</span>));</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="collection/clustering">Clustering <a href="#collection/clustering"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="eles.markovClustering">
								<span class="fn-name">eles.markovClustering()</span>  <a href="#eles.markovClustering"><span class="fa fa-bookmark"></span></a>
								<span id="collection/clustering/eles.markovClustering">&nbsp;</span><span id="collection/clustering/eles.mcl">&nbsp;</span><span id="eles.mcl">&nbsp;</span><span id="collection/clustering/eles.markovClustering">&nbsp;</span><span id="eles.markovClustering">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/clustering/eles.mcl" class="pure-alias-name">eles.mcl()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Considering only the elements in the calling collection, run the <a href="https://micans.org/mcl/">Markov cluster algorithm</a> of the nodes.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">eles.markovClustering( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name">attributes: [ function(edge) ... ]</span>
																
																<span class="descr"><p>An array of attribute functions, each of which returns a numeric attribute value for the specified edge.  Attributes are used to cluster the nodes; i.e. the attributes of an edge indicate similarity between its nodes.</p>
</span>
															</li>

															<li>
																<span class="name">expandFactor</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A number that affects time of computation and cluster granularity to some extent: <code>M * M</code> (default <code>2</code>)</p>
</span>
															</li>

															<li>
																<span class="name">inflateFactor</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A number that affects cluster granularity (the greater the value, the more clusters): <code>M(i,j) / E(j)</code> (default <code>2</code>)</p>
</span>
															</li>

															<li>
																<span class="name">multFactor</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>Optional number of self loops for each node. Use a neutral value to improve cluster computations (default <code>1</code>).</p>
</span>
															</li>

															<li>
																<span class="name">maxIterations</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>Maximum number of iterations of the MCL algorithm in a single run (default <code>20</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function performs Markov clustering on only the subset of the graph in the calling collection.  Markov clustering uses the topology of the graph and the specified edge attributes to determine clusters.</p>
<p>This function returns an array, containing collections.  Each collection in the array is a cluster found by the Markov clustering algorithm.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> clusters = cy.elements().markovCluster({
  <span class="hljs-attr">attributes</span>: [
    <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> edge </span>)</span>{ <span class="hljs-keyword">return</span> edge.data(<span class="hljs-string">'closeness'</span>); }
  ]
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.kMeans">
								<span class="fn-name">nodes.kMeans()</span>  <a href="#nodes.kMeans"><span class="fa fa-bookmark"></span></a>
								<span id="collection/clustering/nodes.kMeans">&nbsp;</span><span id="collection/clustering/nodes.kMeans">&nbsp;</span><span id="nodes.kMeans">&nbsp;</span>
							</div>



							<div class="descr"><p>Considering only the nodes in the calling collection, calculate the <a href="https://en.wikipedia.org/wiki/K-means_clustering">k-means clustering</a> of the nodes.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.kMeans( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name">attributes: [ function( node ) ... ]</span>
																
																<span class="descr"><p>An array of attribute functions, each of which returns a numeric attribute value for the specified node.  Attributes are used to cluster the nodes; i.e. two nodes with similar attributes tend to be in the same cluster.  Each attribute may have to be normalised in order for the chosen distance metric to make sense.  Attributes must be specified unless a custom <code>distance: function( nodeP, nodeQ )</code> is specified.</p>
</span>
															</li>

															<li>
																<span class="name">k</span>
																
																<span class="descr"><p>The number of clusters to return.</p>
</span>
															</li>

															<li>
																<span class="name">distance</span>
																
																<span class="descr"><p>The distance classifier used to compare attribute vectors.  It is optional if attributes are specified.  It may take on one of several values:</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name">'euclidean'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Euclidean_distance">Euclidean distance</a> (default)</p>
</span>
																</li>


																<li>
																	<span class="name">'squaredEuclidean'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Euclidean_distance#Squared_Euclidean_distance">Squared Euclidean distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">'manhattan'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Taxicab_geometry">Manhattan distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">'max'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Uniform_norm">Max distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">function( length, getPAt, getQAt[, nodeP, nodeQ] )</span>
																	
																	<span class="descr"><p>A custom function that returns the distance between attribute vectors <code>p</code> and <code>q</code>.</p>
</span>
																</li>

																<ul class="fields">
																	<li>
																		<span class="name">length</span>
																		
																		<span class="descr"><p>The length of the vectors.</p>
</span>
																	</li>
																	<li>
																		<span class="name">getPAt(i)</span>
																		
																		<span class="descr"><p>A function that returns the ith value of the <code>p</code> vector.</p>
</span>
																	</li>
																	<li>
																		<span class="name">getQAt(i)</span>
																		
																		<span class="descr"><p>A function that returns the ith value of the <code>q</code> vector.</p>
</span>
																	</li>
																</ul>

															</ul>
															<li>
																<span class="name">maxIterations</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>The maximum number of iterations of the algorithm to run (default <code>10</code>).</p>
</span>
															</li>

															<li>
																<span class="name">sensitivityThreshold</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>The coefficients difference threshold used to determine whether the algorithm has converged (default <code>0.001</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function performs k-means clustering on only the subset of the graph in the calling collection.  K-means does not normally take into consideration the topology of the graph.</p>
<p>This function returns an array, containing collections.  Each collection in the array is a cluster found by the algorithm.</p>
<p>One of the major differences between the k-means and k-medoids algorithms is the manner in which the cluster centres are initialized. In k-means, the cluster centres (centroids) are vectors with elements initialised to random values within each dimension’s range. In k-medoids, the cluster centres (medoids) are random nodes from the data set.  </p>
<p>The other is that the k-means algorithm determines new cluster centres by taking the average of all the nodes within that cluster, whereas k-medoids selects the node with the lowest configuration cost as the new cluster centre.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> clusters = cy.elements().kMeans({
  <span class="hljs-attr">k</span>: <span class="hljs-number">2</span>,
  <span class="hljs-attr">attributes</span>: [
    <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-keyword">return</span> edge.data(<span class="hljs-string">'weight'</span>); }
  ]
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.kMedoids">
								<span class="fn-name">nodes.kMedoids()</span>  <a href="#nodes.kMedoids"><span class="fa fa-bookmark"></span></a>
								<span id="collection/clustering/nodes.kMedoids">&nbsp;</span><span id="collection/clustering/nodes.kMedoids">&nbsp;</span><span id="nodes.kMedoids">&nbsp;</span>
							</div>



							<div class="descr"><p>Considering only the nodes in the calling collection, calculate the <a href="https://en.wikipedia.org/wiki/K-medoids">k-medoids clustering</a> of the nodes.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.kMedoids( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name">attributes: [ function( node ) ... ]</span>
																
																<span class="descr"><p>An array of attribute functions, each of which returns a numeric attribute value for the specified node.  Attributes are used to cluster the nodes; i.e. two nodes with similar attributes tend to be in the same cluster.  Each attribute may have to be normalised in order for the chosen distance metric to make sense.  Attributes must be specified unless a custom <code>distance: function( nodeP, nodeQ )</code> is specified.</p>
</span>
															</li>

															<li>
																<span class="name">k</span>
																
																<span class="descr"><p>The number of clusters to return.</p>
</span>
															</li>

															<li>
																<span class="name">distance</span>
																
																<span class="descr"><p>The distance classifier used to compare attribute vectors.  It is optional if attributes are specified.  It may take on one of several values:</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name">'euclidean'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Euclidean_distance">Euclidean distance</a> (default)</p>
</span>
																</li>


																<li>
																	<span class="name">'squaredEuclidean'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Euclidean_distance#Squared_Euclidean_distance">Squared Euclidean distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">'manhattan'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Taxicab_geometry">Manhattan distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">'max'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Uniform_norm">Max distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">function( length, getPAt, getQAt[, nodeP, nodeQ] )</span>
																	
																	<span class="descr"><p>A custom function that returns the distance between attribute vectors <code>p</code> and <code>q</code>.</p>
</span>
																</li>

																<ul class="fields">
																	<li>
																		<span class="name">length</span>
																		
																		<span class="descr"><p>The length of the vectors.</p>
</span>
																	</li>
																	<li>
																		<span class="name">getPAt(i)</span>
																		
																		<span class="descr"><p>A function that returns the ith value of the <code>p</code> vector.</p>
</span>
																	</li>
																	<li>
																		<span class="name">getQAt(i)</span>
																		
																		<span class="descr"><p>A function that returns the ith value of the <code>q</code> vector.</p>
</span>
																	</li>
																	<li>
																		<span class="name">nodeP</span>
																		<span class="optional">[optional]</span>
																		<span class="descr"><p>An optionally-used reference to the node associated with the <code>p</code> attribute vector.  It is useful for affecting the weights with information outside of the attributes, such as connectivity.</p>
</span>
																	</li>
																	<li>
																		<span class="name">nodeQ</span>
																		<span class="optional">[optional]</span>
																		<span class="descr"><p>An optionally-used reference to the node associated with the <code>q</code> attribute vector.  It is useful for affecting the weights with information outside of the attributes, such as connectivity.</p>
</span>
																	</li>
																</ul>

																<li>
																	<span class="name">function( nodeP, nodeQ )</span>
																	
																	<span class="descr"><p>A custom function that returns the distance between <code>nodeP</code> and <code>nodeQ</code>.  This allows for specifying the distance matrix directly, forgoing attributes.</p>
</span>
																</li>


															</ul>
															<li>
																<span class="name">maxIterations</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>The maximum number of iterations of the algorithm to run (default <code>10</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function performs k-mediods clustering on only the subset of the graph in the calling collection.  K-medoids does not normally take into consideration topology.</p>
<p>This function returns an array, containing collections.  Each collection in the array is a cluster found by the algorithm.</p>
<p>One of the major differences between the k-means and k-medoids algorithms is the manner in which the cluster centres are initialized. In k-means, the cluster centres (centroids) are vectors with elements initialised to random values within each dimension’s range. In k-medoids, the cluster centres (medoids) are random nodes from the data set.  </p>
<p>The other is that the k-means algorithm determines new cluster centres by taking the average of all the nodes within that cluster, whereas k-medoids selects the node with the lowest configuration cost as the new cluster centre.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> clusters = cy.elements().kMediods({
  <span class="hljs-attr">k</span>: <span class="hljs-number">2</span>,
  <span class="hljs-attr">attributes</span>: [
    <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-keyword">return</span> edge.data(<span class="hljs-string">'weight'</span>); }
  ]
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.fuzzyCMeans">
								<span class="fn-name">nodes.fuzzyCMeans()</span>  <a href="#nodes.fuzzyCMeans"><span class="fa fa-bookmark"></span></a>
								<span id="collection/clustering/nodes.fuzzyCMeans">&nbsp;</span><span id="collection/clustering/nodes.fcm">&nbsp;</span><span id="nodes.fcm">&nbsp;</span><span id="collection/clustering/nodes.fuzzyCMeans">&nbsp;</span><span id="nodes.fuzzyCMeans">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/clustering/nodes.fcm" class="pure-alias-name">nodes.fcm()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Considering only the elements in the calling collection, calculate the <a href="https://en.wikipedia.org/wiki/Fuzzy_clustering#Fuzzy_C-means_clustering">fuzzy c-means clustering</a> of the nodes.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.fuzzyCMeans( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name">attributes: [ function( node ) ... ]</span>
																
																<span class="descr"><p>An array of attribute functions, each of which returns a numeric attribute value for the specified node.  Attributes are used to cluster the nodes; i.e. two nodes with similar attributes tend to be in the same cluster.  Each attribute may have to be normalised in order for the chosen distance metric to make sense.  Attributes must be specified unless a custom <code>distance: function( nodeP, nodeQ )</code> is specified.</p>
</span>
															</li>

															<li>
																<span class="name">k</span>
																
																<span class="descr"><p>The number of clusters to return.</p>
</span>
															</li>

															<li>
																<span class="name">distance</span>
																
																<span class="descr"><p>The distance classifier used to compare attribute vectors.  It is optional if attributes are specified.  It may take on one of several values:</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name">'euclidean'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Euclidean_distance">Euclidean distance</a> (default)</p>
</span>
																</li>


																<li>
																	<span class="name">'squaredEuclidean'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Euclidean_distance#Squared_Euclidean_distance">Squared Euclidean distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">'manhattan'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Taxicab_geometry">Manhattan distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">'max'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Uniform_norm">Max distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">function( length, getPAt, getQAt[, nodeP, nodeQ] )</span>
																	
																	<span class="descr"><p>A custom function that returns the distance between attribute vectors <code>p</code> and <code>q</code>.</p>
</span>
																</li>

																<ul class="fields">
																	<li>
																		<span class="name">length</span>
																		
																		<span class="descr"><p>The length of the vectors.</p>
</span>
																	</li>
																	<li>
																		<span class="name">getPAt(i)</span>
																		
																		<span class="descr"><p>A function that returns the ith value of the <code>p</code> vector.</p>
</span>
																	</li>
																	<li>
																		<span class="name">getQAt(i)</span>
																		
																		<span class="descr"><p>A function that returns the ith value of the <code>q</code> vector.</p>
</span>
																	</li>
																</ul>

															</ul>
															<li>
																<span class="name">maxIterations</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>The maximum number of iterations of the algorithm to run (default <code>10</code>).</p>
</span>
															</li>

															<li>
																<span class="name">sensitivityThreshold</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>The coefficient difference threshold used to determine whether the algorithm has converged (default <code>0.001</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function performs fuzzy c-means clustering on only the subset of the graph in the calling collection.</p>
<p>This function returns an object of the following format:</p>
<pre><code class="language-js">{
  <span class="hljs-comment">// The resultant clusters</span>
  clusters: [ <span class="hljs-comment">/* cluster0, cluster1, ... */</span> ],

  <span class="hljs-comment">// A two-dimensional array containing a partition matrix</span>
  <span class="hljs-comment">// degreeOfMembership[i][j] indicates the degree to which nodes[i] belongs to clusters[j]</span>
  degreeOfMembership: [ <span class="hljs-comment">/* row0, row1, ... */</span> ]
}</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> clusters = cy.elements().fuzzyCMeans({
  <span class="hljs-attr">k</span>: <span class="hljs-number">2</span>,
  <span class="hljs-attr">attributes</span>: [
    <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-keyword">return</span> edge.data(<span class="hljs-string">'weight'</span>); }
  ]
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.hierarchicalClustering">
								<span class="fn-name">nodes.hierarchicalClustering()</span>  <a href="#nodes.hierarchicalClustering"><span class="fa fa-bookmark"></span></a>
								<span id="collection/clustering/nodes.hierarchicalClustering">&nbsp;</span><span id="collection/clustering/nodes.hca">&nbsp;</span><span id="nodes.hca">&nbsp;</span><span id="collection/clustering/nodes.hierarchicalClustering">&nbsp;</span><span id="nodes.hierarchicalClustering">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/clustering/nodes.hca" class="pure-alias-name">nodes.hca()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Considering only the elements in the calling collection, calculate the agglomerative <a href="https://en.wikipedia.org/wiki/Hierarchical_clustering">hierarchical clustering</a> of the nodes.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.hierarchicalClustering( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name">attributes: [ function( node ) ... ]</span>
																
																<span class="descr"><p>An array of attribute functions, each of which returns a numeric attribute value for the specified node.  Attributes are used to cluster the nodes; i.e. two nodes with similar attributes tend to be in the same cluster.  Each attribute may have to be normalised in order for the chosen distance metric to make sense.  Attributes must be specified unless a custom <code>distance: function( nodeP, nodeQ )</code> is specified.</p>
</span>
															</li>

															<li>
																<span class="name">distance</span>
																
																<span class="descr"><p>The distance classifier used to compare attribute vectors.  It is optional if attributes are specified.  It may take on one of several values:</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name">'euclidean'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Euclidean_distance">Euclidean distance</a> (default)</p>
</span>
																</li>


																<li>
																	<span class="name">'squaredEuclidean'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Euclidean_distance#Squared_Euclidean_distance">Squared Euclidean distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">'manhattan'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Taxicab_geometry">Manhattan distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">'max'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Uniform_norm">Max distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">function( length, getPAt, getQAt[, nodeP, nodeQ] )</span>
																	
																	<span class="descr"><p>A custom function that returns the distance between attribute vectors <code>p</code> and <code>q</code>.</p>
</span>
																</li>

																<ul class="fields">
																	<li>
																		<span class="name">length</span>
																		
																		<span class="descr"><p>The length of the vectors.</p>
</span>
																	</li>
																	<li>
																		<span class="name">getPAt(i)</span>
																		
																		<span class="descr"><p>A function that returns the ith value of the <code>p</code> vector.</p>
</span>
																	</li>
																	<li>
																		<span class="name">getQAt(i)</span>
																		
																		<span class="descr"><p>A function that returns the ith value of the <code>q</code> vector.</p>
</span>
																	</li>
																	<li>
																		<span class="name">nodeP</span>
																		<span class="optional">[optional]</span>
																		<span class="descr"><p>An optionally-used reference to the node associated with the <code>p</code> attribute vector.  It is useful for affecting the weights with information outside of the attributes, such as connectivity.</p>
</span>
																	</li>
																	<li>
																		<span class="name">nodeQ</span>
																		<span class="optional">[optional]</span>
																		<span class="descr"><p>An optionally-used reference to the node associated with the <code>q</code> attribute vector.  It is useful for affecting the weights with information outside of the attributes, such as connectivity.</p>
</span>
																	</li>
																</ul>

																<li>
																	<span class="name">function( nodeP, nodeQ )</span>
																	
																	<span class="descr"><p>A custom function that returns the distance between <code>nodeP</code> and <code>nodeQ</code>.  This allows for specifying the distance matrix directly, forgoing attributes.</p>
</span>
																</li>


															</ul>
															<li>
																<span class="name">linkage</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>The <a href="https://en.wikipedia.org/wiki/Hierarchical_clustering#Linkage_criteria">linkage criterion</a> for measuring the distance between two clusters; may be one of <code>&#39;mean&#39;</code>, <code>&#39;min&#39;</code> (a.k.a. <code>&#39;single&#39;</code>, default), <code>&#39;max&#39;</code> (a.k.a. <code>&#39;complete&#39;</code>).</p>
</span>
															</li>

															<li>
																<span class="name">mode</span>
																
																<span class="descr"><p>The mode of the algorithm.  For <code>&#39;threshold&#39;</code> (default), clusters are merged until they are at least the specified distance apart.  For <code>&#39;dendrogram&#39;</code>, the clusters are recursively merged using the branches in a <a href="https://en.wikipedia.org/wiki/Dendrogram">dendrogram</a> (tree) structure beyond a specified depth.</p>
</span>
															</li>

															<li>
																<span class="name">threshold</span>
																
																<span class="descr"><p>In <code>mode: &#39;threshold&#39;</code>, distance threshold for stopping the algorithm.  All pairs of the returned clusters are at least <code>threshold</code> distance apart.  Without specifying this value for <code>mode: &#39;threshold&#39;</code>, all clusters will eventually be merged into a single cluster.</p>
</span>
															</li>

															<li>
																<span class="name">dendrogramDepth</span>
																
																<span class="descr"><p>In <code>mode: &#39;dendrogram&#39;</code>, the depth beyond which branches are merged in the tree.  For example, a value of 0 (default) results in all branches being merged into a single cluster.</p>
</span>
															</li>

															<li>
																<span class="name">addDendrogram</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>In <code>mode: &#39;dendrogram&#39;</code>, whether to add nodes and edges to the graph for the dendrogram (default <code>false</code>).  This is not necessary to run the algorithm, but it is useful for visualising the results.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function performs hierarchical clustering on only the subset of the graph in the calling collection.  Hierarchical clustering does not normally take into account the topology of the graph.</p>
<p>This function returns an array, containing collections.  Each collection in the array is a cluster found by the algorithm.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> clusters = cy.elements().hca({
  <span class="hljs-attr">mode</span>: <span class="hljs-string">'threshold'</span>,
  <span class="hljs-attr">threshold</span>: <span class="hljs-number">25</span>,
  <span class="hljs-attr">attributes</span>: [
    <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-keyword">return</span> node.data(<span class="hljs-string">'weight'</span>); }
  ]
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.affinityPropagation">
								<span class="fn-name">nodes.affinityPropagation()</span>  <a href="#nodes.affinityPropagation"><span class="fa fa-bookmark"></span></a>
								<span id="collection/clustering/nodes.affinityPropagation">&nbsp;</span><span id="collection/clustering/nodes.ap">&nbsp;</span><span id="nodes.ap">&nbsp;</span><span id="collection/clustering/nodes.affinityPropagation">&nbsp;</span><span id="nodes.affinityPropagation">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/clustering/nodes.ap" class="pure-alias-name">nodes.ap()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Considering only the elements in the calling collection, calculate the <a href="https://en.wikipedia.org/wiki/Affinity_propagation">affinity propagation clustering</a> of the nodes.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.affinityPropagation( <span class="args-summary"><span class="comma">,&nbsp;</span>options</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name">options</span>
													
													<span class="descr"></span>

													<ul class="fields">
															<li>
																<span class="name">attributes: [ function( node ) ... ]</span>
																
																<span class="descr"><p>An array of attribute functions, each of which returns a numeric attribute value for the specified node.  Attributes are used to cluster the nodes; i.e. two nodes with similar attributes tend to be in the same cluster.  Each attribute may have to be normalised in order for the chosen distance metric to make sense.  Attributes must be specified unless a custom <code>distance: function( nodeP, nodeQ )</code> is specified.</p>
</span>
															</li>

															<li>
																<span class="name">distance</span>
																
																<span class="descr"><p>The distance classifier used to compare attribute vectors.  It is optional if attributes are specified.  It may take on one of several values:</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name">'euclidean'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Euclidean_distance">Euclidean distance</a> (default)</p>
</span>
																</li>


																<li>
																	<span class="name">'squaredEuclidean'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Euclidean_distance#Squared_Euclidean_distance">Squared Euclidean distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">'manhattan'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Taxicab_geometry">Manhattan distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">'max'</span>
																	
																	<span class="descr"><p><a href="https://en.wikipedia.org/wiki/Uniform_norm">Max distance</a></p>
</span>
																</li>


																<li>
																	<span class="name">function( length, getPAt, getQAt[, nodeP, nodeQ] )</span>
																	
																	<span class="descr"><p>A custom function that returns the distance between attribute vectors <code>p</code> and <code>q</code>.</p>
</span>
																</li>

																<ul class="fields">
																	<li>
																		<span class="name">length</span>
																		
																		<span class="descr"><p>The length of the vectors.</p>
</span>
																	</li>
																	<li>
																		<span class="name">getPAt(i)</span>
																		
																		<span class="descr"><p>A function that returns the ith value of the <code>p</code> vector.</p>
</span>
																	</li>
																	<li>
																		<span class="name">getQAt(i)</span>
																		
																		<span class="descr"><p>A function that returns the ith value of the <code>q</code> vector.</p>
</span>
																	</li>
																	<li>
																		<span class="name">nodeP</span>
																		<span class="optional">[optional]</span>
																		<span class="descr"><p>An optionally-used reference to the node associated with the <code>p</code> attribute vector.  It is useful for affecting the weights with information outside of the attributes, such as connectivity.</p>
</span>
																	</li>
																	<li>
																		<span class="name">nodeQ</span>
																		<span class="optional">[optional]</span>
																		<span class="descr"><p>An optionally-used reference to the node associated with the <code>q</code> attribute vector.  It is useful for affecting the weights with information outside of the attributes, such as connectivity.</p>
</span>
																	</li>
																</ul>

																<li>
																	<span class="name">function( nodeP, nodeQ )</span>
																	
																	<span class="descr"><p>A custom function that returns the distance between <code>nodeP</code> and <code>nodeQ</code>.  This allows for specifying the distance matrix directly, forgoing attributes.</p>
</span>
																</li>


															</ul>
															<li>
																<span class="name">preference</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>The metric used to determine the suitability of a data point (i.e. node attribute vector) to serve as an exemplar.  It may take on one of several special values, which are determined from the similarity matrix (i.e. the negative distance matrix).  Or a manual, numeric value may be used (generally of the opposite sign of your distance values).  The special values include:</p>
</span>
															</li>

															<ul class="fields">
																<li>
																	<span class="name">'median'</span>
																	
																	<span class="descr"><p>Use the median value of the similarity matrix (default).</p>
</span>
																</li>


																<li>
																	<span class="name">'mean'</span>
																	
																	<span class="descr"><p>Use the mean value of the similarity matrix.</p>
</span>
																</li>


																<li>
																	<span class="name">'min'</span>
																	
																	<span class="descr"><p>Use the minimum value of the similarity matrix.</p>
</span>
																</li>


																<li>
																	<span class="name">'max'</span>
																	
																	<span class="descr"><p>Use the maximum value of the similarity matrix.</p>
</span>
																</li>


															</ul>
															<li>
																<span class="name">damping</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>A damping factor on [0.5, 1) (default <code>0.8</code>).</p>
</span>
															</li>

															<li>
																<span class="name">minIterations</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>The minimum number of iteraions the algorithm will run before stopping (default <code>100</code>).</p>
</span>
															</li>

															<li>
																<span class="name">maxIterations</span>
																<span class="optional">[optional]</span>
																<span class="descr"><p>The maximum number of iteraions the algorithm will run before stopping (default <code>1000</code>).</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>Note that this function performs affinity propagation clustering on only the subset of the graph in the calling collection.  Affinity propagation does not normally take into account the topology of the graph.</p>
<p>This function returns an array, containing collections.  Each collection in the array is a cluster found by the algorithm.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> clusters = cy.elements().ap({
  <span class="hljs-attr">attributes</span>: [
    <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-keyword">return</span> node.data(<span class="hljs-string">'weight'</span>); }
  ]
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="collection/compound-nodes">Compound nodes <a href="#collection/compound-nodes"><span class="fa fa-bookmark"></span></a></h2>


						<p>These functions apply to <a href="#notation/compound-nodes">compound graphs</a>.</p>



						<div class="function">
							<div class="name" id="node.isParent">
								<span class="fn-name">node.isParent()</span>  <a href="#node.isParent"><span class="fa fa-bookmark"></span></a>
								<span id="collection/compound-nodes/node.isParent">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the node is a compound parent (i.e. a node containing one or more child nodes)</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="node.isChildless">
								<span class="fn-name">node.isChildless()</span>  <a href="#node.isChildless"><span class="fa fa-bookmark"></span></a>
								<span id="collection/compound-nodes/node.isChildless">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the node is childless (i.e. a node with no child nodes)</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="node.isChild">
								<span class="fn-name">node.isChild()</span>  <a href="#node.isChild"><span class="fa fa-bookmark"></span></a>
								<span id="collection/compound-nodes/node.isChild">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the node is a compound child (i.e. contained within a node)</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="node.isOrphan">
								<span class="fn-name">node.isOrphan()</span>  <a href="#node.isOrphan"><span class="fa fa-bookmark"></span></a>
								<span id="collection/compound-nodes/node.isOrphan">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the node is an orphan (i.e. a node with no parent)</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.parent">
								<span class="fn-name">nodes.parent()</span>  <a href="#nodes.parent"><span class="fa fa-bookmark"></span></a>
								<span id="collection/compound-nodes/nodes.parent">&nbsp;</span><span id="collection/compound-nodes/nodes.parent">&nbsp;</span><span id="nodes.parent">&nbsp;</span>
							</div>



							<div class="descr"><p>Get the compound parent node of each node in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.parent( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A selector used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.ancestors">
								<span class="fn-name">nodes.ancestors()</span>  <a href="#nodes.ancestors"><span class="fa fa-bookmark"></span></a>
								<span id="collection/compound-nodes/nodes.ancestors">&nbsp;</span><span id="collection/compound-nodes/nodes.parents">&nbsp;</span><span id="nodes.parents">&nbsp;</span><span id="collection/compound-nodes/nodes.ancestors">&nbsp;</span><span id="nodes.ancestors">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="collection/compound-nodes/nodes.parents" class="pure-alias-name">nodes.parents()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get all compound ancestor nodes (i.e. parents, parents&#39; parents, etc.) of each node in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.ancestors( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A selector used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.commonAncestors">
								<span class="fn-name">nodes.commonAncestors()</span>  <a href="#nodes.commonAncestors"><span class="fa fa-bookmark"></span></a>
								<span id="collection/compound-nodes/nodes.commonAncestors">&nbsp;</span><span id="collection/compound-nodes/nodes.commonAncestors">&nbsp;</span><span id="nodes.commonAncestors">&nbsp;</span>
							</div>



							<div class="descr"><p>Get all compound ancestors common to all the nodes in the collection, starting with the closest and getting progressively farther.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.commonAncestors( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A selector used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="details">Details</h3>
<p>You can get the closest common ancestor via <code>nodes.commonAncestors().first()</code> and the farthest via <code>nodes.commonAncestors().last()</code>, because the common ancestors are in descending order of closeness.</p>

							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.orphans">
								<span class="fn-name">nodes.orphans()</span>  <a href="#nodes.orphans"><span class="fa fa-bookmark"></span></a>
								<span id="collection/compound-nodes/nodes.orphans">&nbsp;</span><span id="collection/compound-nodes/nodes.orphans">&nbsp;</span><span id="nodes.orphans">&nbsp;</span>
							</div>



							<div class="descr"><p>Get all orphan (i.e. has no compound parent) nodes in the calling collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.orphans( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A selector used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.nonorphans">
								<span class="fn-name">nodes.nonorphans()</span>  <a href="#nodes.nonorphans"><span class="fa fa-bookmark"></span></a>
								<span id="collection/compound-nodes/nodes.nonorphans">&nbsp;</span><span id="collection/compound-nodes/nodes.nonorphans">&nbsp;</span><span id="nodes.nonorphans">&nbsp;</span>
							</div>



							<div class="descr"><p>Get all nonorphan (i.e. has a compound parent) nodes in the calling collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.nonorphans( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A selector used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.children">
								<span class="fn-name">nodes.children()</span>  <a href="#nodes.children"><span class="fa fa-bookmark"></span></a>
								<span id="collection/compound-nodes/nodes.children">&nbsp;</span><span id="collection/compound-nodes/nodes.children">&nbsp;</span><span id="nodes.children">&nbsp;</span>
							</div>



							<div class="descr"><p>Get all compound child (i.e. direct descendant) nodes of each node in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.children( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A selector used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.descendants">
								<span class="fn-name">nodes.descendants()</span>  <a href="#nodes.descendants"><span class="fa fa-bookmark"></span></a>
								<span id="collection/compound-nodes/nodes.descendants">&nbsp;</span><span id="collection/compound-nodes/nodes.descendants">&nbsp;</span><span id="nodes.descendants">&nbsp;</span>
							</div>



							<div class="descr"><p>Get all compound descendant (i.e. children, children&#39;s children, etc.) nodes of each node in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.descendants( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A selector used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="nodes.siblings">
								<span class="fn-name">nodes.siblings()</span>  <a href="#nodes.siblings"><span class="fa fa-bookmark"></span></a>
								<span id="collection/compound-nodes/nodes.siblings">&nbsp;</span><span id="collection/compound-nodes/nodes.siblings">&nbsp;</span><span id="nodes.siblings">&nbsp;</span>
							</div>



							<div class="descr"><p>Get all sibling (i.e. same compound parent) nodes of each node in the collection.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">nodes.siblings( <span class="args-summary"> [<span class="comma">,&nbsp;</span>selector]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#selectors">selector</a></span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A selector used to filter the resultant collection.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>

				<h1 id="selectors">Selectors <a href="#selectors"><span class="fa fa-bookmark"></span></a></h1>

					<h2 id="selectors/notes-amp-caveats">Notes &amp; caveats <a href="#selectors/notes-amp-caveats"><span class="fa fa-bookmark"></span></a></h2>
<p>A selector functions similar to a CSS selector on DOM elements, but selectors in Cytoscape.js instead work on collections of graph elements.  Note that wherever a selector may be specified as the argument to a function, a <a href="#collection/building--filtering/eles.filter"><code>eles.filter()</code></a>-style filter function may be used in place of the selector.  For example:</p>
<pre><code class="language-js">cy.$(<span class="hljs-string">'#j'</span>).neighborhood(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> ele </span>)</span>{
  <span class="hljs-keyword">return</span> ele.isEdge();
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>The selectors can be combined together to make powerful queries in Cytoscape.js, for example:</p>
<pre><code class="language-js"><span class="hljs-comment">// get all nodes with weight more than 50 and height strictly less than 180</span>
cy.elements(<span class="hljs-string">"node[weight &gt;= 50][height &lt; 180]"</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Selectors can be joined together (effectively creating a logical OR) with commas:</p>
<pre><code class="language-js"><span class="hljs-comment">// get node j and the edges coming out from it</span>
cy.elements(<span class="hljs-string">'node#j, edge[source = "j"]'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>It is important to note that strings need to be enclosed by quotation marks:</p>
<pre><code class="language-js"><span class="hljs-comment">//cy.filter('node[name = Jerry]'); // this doesn't work</span>
cy.filter(<span class="hljs-string">'node[name = "Jerry"]'</span>); <span class="hljs-comment">// but this does</span></code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Note that some characters need to be escaped for IDs, field names, and so on:</p>
<pre><code class="language-js">cy.filter(<span class="hljs-string">'#some\\$funky\\@id'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Some examples of these characters include <code>( ^ $ \ / ( ) | ? + * [ ] { } , . )</code>.  Try to avoid using non-alpha-numeric characters for field names and IDs to keep things simple.  If you must use special characters for IDs, use a data selector rather than an ID selector:</p>
<pre><code class="language-js">cy.filter(<span class="hljs-string">'[id = "some$funky@id"]'</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h2 id="selectors/group-class-amp-id">Group, class, &amp; ID <a href="#selectors/group-class-amp-id"><span class="fa fa-bookmark"></span></a></h2>
<p><strong><code>node</code>,  <code>edge</code>, or <code>*</code> (group selector)</strong>
Matches elements based on group (<code>node</code> for nodes, <code>edge</code> for edges, <code>*</code> for all).</p>
<p><strong><code>.className</code></strong>
Matches elements that have the specified class (e.g. use <code>.foo</code> for a class named “foo”).</p>
<p><strong><code>#id</code></strong>
Matches element with the matching ID (e.g. <code>#foo</code> is the same as <code>[id = &#39;foo&#39;]</code>)</p>
<h2 id="selectors/data">Data <a href="#selectors/data"><span class="fa fa-bookmark"></span></a></h2>
<p><strong><code>[name]</code></strong>
Matches elements if they have the specified data attribute defined, i.e. not <code>undefined</code> (e.g. <code>[foo]</code> for an attribute named “foo”).  Here, <code>null</code> is considered a defined value.</p>
<p><strong><code>[^name]</code></strong>
Matches elements if the specified data attribute is not defined, i.e. <code>undefined</code> (e.g <code>[^foo]</code>).  Here, <code>null</code> is considered a defined value.</p>
<p><strong><code>[?name]</code></strong>
Matches elements if the specified data attribute is a <a href="http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/">truthy</a> value (e.g. <code>[?foo]</code>).</p>
<p><strong><code>[!name]</code></strong>
Matches elements if the specified data attribute is a <a href="http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/">falsey</a> value (e.g. <code>[!foo]</code>).</p>
<p><strong><code>[name = value]</code></strong>
Matches elements if their data attribute matches a specified value (e.g. <code>[foo = &#39;bar&#39;]</code> or <code>[num = 2]</code>).</p>
<p><strong><code>[name != value]</code></strong>
Matches elements if their data attribute doesn’t match a specified value (e.g. <code>[foo != &#39;bar&#39;]</code> or <code>[num != 2]</code>).</p>
<p><strong><code>[name &gt; value]</code></strong>
Matches elements if their data attribute is greater than a specified value (e.g. <code>[foo &gt; &#39;bar&#39;]</code> or <code>[num &gt; 2]</code>).</p>
<p><strong><code>[name &gt;= value]</code></strong>
Matches elements if their data attribute is greater than or equal to a specified value (e.g. <code>[foo &gt;= &#39;bar&#39;]</code> or <code>[num &gt;= 2]</code>).</p>
<p><strong><code>[name &lt; value]</code></strong>
Matches elements if their data attribute is less than a specified value (e.g. <code>[foo &lt; &#39;bar&#39;]</code> or <code>[num &lt; 2]</code>).</p>
<p><strong><code>[name &lt;= value]</code></strong>
Matches elements if their data attribute is less than or equal to a specified value (e.g. <code>[foo &lt;= &#39;bar&#39;]</code> or <code>[num &lt;= 2]</code>).</p>
<p><strong><code>[name *= value]</code></strong>
Matches elements if their data attribute contains the specified value as a substring (e.g. <code>[foo *= &#39;bar&#39;]</code>).</p>
<p><strong><code>[name ^= value]</code></strong>
Matches elements if their data attribute starts with the specified value (e.g. <code>[foo ^= &#39;bar&#39;]</code>).</p>
<p><strong><code>[name $= value]</code></strong>
Matches elements if their data attribute ends with the specified value (e.g. <code>[foo $= &#39;bar&#39;]</code>).</p>
<p><strong><code>@</code> (data attribute operator modifier)</strong>
Prepended to an operator so that is case insensitive (e.g. <code>[foo @$= &#39;ar&#39;]</code>, <code>[foo @&gt;= &#39;a&#39;]</code>, <code>[foo @= &#39;bar&#39;]</code>)</p>
<p><strong><code>!</code> (data attribute operator modifier)</strong>
Prepended to an operator so that it is negated (e.g. <code>[foo !$= &#39;ar&#39;]</code>, <code>[foo !&gt;= &#39;a&#39;]</code>)</p>
<p><strong><code>[[]]</code> (metadata brackets)</strong>
Use double square brackets in place of square ones to match against metadata instead of data (e.g. <code>[[degree &gt; 2]]</code> matches elements of degree greater than 2).  The properties that are supported include <code>degree</code>, <code>indegree</code>, and <code>outdegree</code>.</p>
<h2 id="selectors/compound-nodes">Compound nodes <a href="#selectors/compound-nodes"><span class="fa fa-bookmark"></span></a></h2>
<p><strong><code>&gt;</code> (child selector)</strong>
Matches direct children of the parent node (e.g. <code>node &gt; node</code>).</p>
<p><strong><code>&nbsp;</code> (descendant selector)</strong>
Matches descendants of the parent node (e.g. <code>node node</code>).</p>
<p><strong><code>$</code> (subject selector)</strong>
Sets the subject of the selector (e.g. <code>$node &gt; node</code> to select the parent nodes instead of the children).</p>
<h2 id="selectors/state">State <a href="#selectors/state"><span class="fa fa-bookmark"></span></a></h2>
<p><strong>Animation</strong></p>
<ul>
<li><strong><code>:animated</code></strong> : Matches elements that are currently being animated.</li>
<li><strong><code>:unanimated</code></strong> : Matches elements that are not currently being animated.</li>
</ul>
<p><strong>Selection</strong></p>
<ul>
<li><strong><code>:selected</code></strong> : Matches selected elements.</li>
<li><strong><code>:unselected</code></strong> : Matches elements that aren’t selected.</li>
<li><strong><code>:selectable</code></strong> : Matches elements that are selectable.</li>
<li><strong><code>:unselectable</code></strong> : Matches elements that aren’t selectable.</li>
</ul>
<p><strong>Locking</strong></p>
<ul>
<li><strong><code>:locked</code></strong> : Matches locked elements.</li>
<li><strong><code>:unlocked</code></strong> : Matches elements that aren’t locked.</li>
</ul>
<p><strong>Style</strong></p>
<ul>
<li><strong><code>:visible</code></strong> : Matches elements that are visible (i.e. <code>display: element</code> and <code>visibility: visible</code>).</li>
<li><strong><code>:hidden</code></strong> : Matches elements that are hidden (i.e. <code>display: none</code> or <code>visibility: hidden</code>).</li>
<li><strong><code>:transparent</code></strong> : Matches elements that are transparent (i.e. <code>opacity: 0</code> for self or parents).</li>
<li><strong><code>:backgrounding</code></strong> : Matches an element if its background image is currently loading.</li>
<li><strong><code>:nonbackgrounding</code></strong> : Matches an element if its background image not currently loading; i.e. there is no image or the image is already loaded).</li>
</ul>
<p><strong>User interaction:</strong></p>
<ul>
<li><strong><code>:grabbed</code></strong> :  Matches elements that are being grabbed by the user.</li>
<li><strong><code>:free</code></strong> :  Matches elements that are not currently being grabbed by the user.</li>
<li><strong><code>:grabbable</code></strong> :  Matches elements that are grabbable by the user.</li>
<li><strong><code>:ungrabbable</code></strong> :  Matches elements that are not grabbable by the user.</li>
<li><strong><code>:active</code></strong> :  Matches elements that are active (i.e. user interaction, similar to <code>:active</code> in CSS).</li>
<li><strong><code>:inactive</code></strong> : Matches elements that are inactive (i.e. no user interaction).</li>
<li><strong><code>:touch</code></strong> : Matches elements when displayed in a touch-based enviroment (e.g. on a tablet).</li>
</ul>
<p><strong>In or out of graph</strong></p>
<ul>
<li><strong><code>:removed</code></strong> : Matches elements that have been removed from the graph.</li>
<li><strong><code>:inside</code></strong> : Matches elements that have are in the graph (they are not removed).</li>
</ul>
<p><strong>Compound nodes</strong></p>
<ul>
<li><strong><code>:parent</code></strong> : Matches parent nodes (they have one or more child nodes).</li>
<li><strong><code>:childless</code></strong> : Matches childless nodes (they have zero child nodes).</li>
<li><strong><code>:child</code></strong> or <strong><code>:nonorphan</code></strong>: Matches child nodes (they each have a parent).</li>
<li><strong><code>:orphan</code></strong> : Matches orphan nodes (they each have no parent).</li>
<li><strong><code>:compound</code></strong> : Matches parent nodes.  Also matches edges connected to parent nodes (they each have at least one parent node among source and target).</li>
</ul>
<p><strong>Edges</strong></p>
<ul>
<li><strong><code>:loop</code></strong> : Matches loop edges (same source as target).</li>
<li><strong><code>:simple</code></strong> : Matches simple edges (i.e. as would be in a <em>simple</em> graph, different source as target).</li>
</ul>



				<h1 id="style">Style <a href="#style"><span class="fa fa-bookmark"></span></a></h1>

					<p>Style in Cytoscape.js follows CSS conventions as closely as possible.  In most cases, a property has the same name and behaviour as its corresponding CSS namesake.  However, the properties in CSS are not sufficient to specify the style of some parts of the graph.  In that case, additional properties are introduced that are unique to Cytoscape.js.</p>
<p>For simplicity and ease of use, <a href="http://www.w3.org/TR/css3-selectors/#specificity">specificity rules</a> are completely ignored in stylesheets.  For a given style property for a given element, the last matching selector wins.</p>
<h2 id="style/format">Format <a href="#style/format"><span class="fa fa-bookmark"></span></a></h2>
<p>The style specified at <a href="#core/initialisation">initialisation</a> can be in a function format, in a plain JSON format, or in a string format — the plain JSON format and string formats being more useful if you want to pull down the style from the server.</p>
<h3 id="string-format">String format</h3>
<p>Note that the trailing semicolons for each property are mandatory.  Parsing will certainly fail without them.</p>
<p>An example style file:</p>
<pre><code><span class="hljs-comment">/* comments may be entered like this */</span>
<span class="hljs-selector-tag">node</span> {
  <span class="hljs-attribute">background-color</span>: green;
}</code></pre><p>At initialisation:</p>
<pre><code class="language-js">cytoscape({
  <span class="hljs-attr">container</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'cy'</span>),

  <span class="hljs-comment">// ...</span>

  style: <span class="hljs-string">'node { background-color: green; }'</span> <span class="hljs-comment">// probably previously loaded via ajax rather than hardcoded</span>

  <span class="hljs-comment">// , ...</span>
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h3 id="plain-json-format">Plain JSON format</h3>
<pre><code class="language-js">cytoscape({
  <span class="hljs-attr">container</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'cy'</span>),

  <span class="hljs-comment">// ...</span>

  style: [
    {
      <span class="hljs-attr">selector</span>: <span class="hljs-string">'node'</span>,
      <span class="hljs-attr">style</span>: {
        <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'red'</span>
      }
    }

    <span class="hljs-comment">// , ...</span>
  ]

  <span class="hljs-comment">// , ...</span>
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h3 id="function-format">Function format</h3>
<pre><code class="language-js">cytoscape({
  <span class="hljs-attr">container</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'cy'</span>),

  <span class="hljs-comment">// ...</span>

  style: cytoscape.stylesheet()
    .selector(<span class="hljs-string">'node'</span>)
      .style({
        <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'blue'</span>
      })

      <span class="hljs-comment">// ...</span>


  <span class="hljs-comment">// , ...</span>
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>You may alternatively use <code>css</code> in place of <code>style</code>, e.g. <code>.selector( ... ).css( ... )</code> or <code>{ selector: ..., css: ... }</code>.</p>
<h3 id="function-values">Function values</h3>
<p>In the JSON or function stylesheet formats, it is possible to specify a function as the value for a style property.  In this manner, the style value can be specified via a function on a per-element basis.</p>
<p><span class="important-indicator"></span> Using a function as a style property value may be convenient in certain cases.  However, it may not be a performant option.  Thus, it may be worthwhile to use caching if possible, such as by using the lodash <a href="https://lodash.com/docs#memoize"><code>_.memoize()</code></a> function.</p>
<p><span class="important-indicator"></span> Note that if using functions as style values, it will not be possible to serialise and deserialise your stylesheet to JSON proper.</p>
<p><span class="important-indicator"></span> The function should not read any other style values, nor should it mutate state for elements or for the graph.  Generally, it should depend only on reading <code>ele.data()</code> or <code>ele.scratch()</code>.</p>
<p>Example:</p>
<pre><code class="language-js">cytoscape({
  <span class="hljs-attr">container</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'cy'</span>),

  <span class="hljs-comment">// ...</span>

  style: cytoscape.stylesheet()
    .selector(<span class="hljs-string">'node'</span>)
      .style({
        <span class="hljs-string">'background-color'</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> ele </span>)</span>{ <span class="hljs-keyword">return</span> ele.data(<span class="hljs-string">'bg'</span>) }

        <span class="hljs-comment">// which works the same as</span>

        <span class="hljs-comment">// 'background-color': 'data(bg)'</span>
      })

      <span class="hljs-comment">// ...</span>


  <span class="hljs-comment">// , ...</span>
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><h2 id="style/property-types">Property types <a href="#style/property-types"><span class="fa fa-bookmark"></span></a></h2>
<ul>
<li>Colours may be specified by name (e.g. <code>red</code>), hex (e.g. <code>#ff0000</code> or <code>#f00</code>), RGB (e.g. <code>rgb(255, 0, 0)</code>), or HSL (e.g. <code>hsl(0, 100%, 50%)</code>).</li>
<li>Values requiring a number, such as a length, can be specified in pixel values (e.g. <code>24px</code>), unitless values that are implicitly in pixels (e.g. <code>24</code>), or em values (e.g. <code>2em</code>).  Sizes are specified in <a href="#notation/position">model co-ordinates</a>, so on-screen (rendered) sizes are as specified at zoom 1.</li>
<li>Opacity values are specified as numbers ranging on <code>0 &lt;= opacity &lt;= 1</code> (e.g <code>0.5</code>).</li>
<li>Time is measured in units of ms or s (e.g. <code>250ms</code>).</li>
<li>Angles are measured in radians (e.g. <code>3.14rad</code>) or degrees (e.g. <code>180deg</code>), clockwise.</li>
<li>Properties that specify a list of values may be formatted in one of the following formats:<ul>
<li>A space-separated string (e.g. <code>&#39;red rgb(0,255,0) blue&#39;</code>)<ul>
<li>Note that for lists of colours, this means that you can not use spaces within <code>rgb()</code> or <code>hsl()</code>.</li>
<li>This is the only format possible in string stylesheets (usually an external file).</li>
</ul>
</li>
<li>A JS array (e.g. <code>[&#39;red&#39;, &#39;rgb(0, 255, 0)&#39;, &#39;blue&#39;]</code>)<ul>
<li>This format may be used in the chained function stylesheets and in JSON stylesheets.</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="style/mappers">Mappers <a href="#style/mappers"><span class="fa fa-bookmark"></span></a></h2>
<p>In addition to specifying the value of a property outright, the developer may also use a mapper to dynamically specify the property value.</p>
<p><span class="important-indicator"></span> If a mapping is defined, either define the mapped data for all elements or use selectors to limit the mapping to elements that have the mapped data defined.  For example, the selector <code>[foo]</code> will apply only to elements with the data field <code>foo</code> defined.</p>
<ul>
<li><strong><code>data()</code></strong> specifies a direct mapping to an element’s data field.  For example, <code>data(descr)</code> would map a property to the value in an element’s <code>descr</code> field in its data (i.e. <code>ele.data(&quot;descr&quot;)</code>).  This is useful for mapping to properties like label text (the <code>label</code> property).</li>
<li><strong><code>mapData()</code></strong> specifies a linear mapping to an element’s data field.  For example, <code>mapData(weight, 0, 100, blue, red)</code> maps an element’s weight to colours between blue and red for weights between 0 and 100.  An element with <code>ele.data(&quot;weight&quot;) === 0</code> would  be mapped to blue, for instance.  Elements whose values fall outside of the specified range are mapped to the extremity values.  In the previous example, an element with <code>ele.data(&quot;weight&quot;) === -1</code> would be mapped to blue.</li>
<li><strong><code>function( ele ){ ... }</code></strong> A function may be passed as the value of a style property.  The function has a single <code>ele</code> argument which specifies the element for which the style property value is being calculated.<ul>
<li><strong>Do</strong> specify a valid value for the corresponding style property for all elements that its corresponding selector block applies.</li>
<li><strong>Do</strong> use pure functions that depend on only<ul>
<li><code>ele.data()</code>,</li>
<li><code>ele.scratch()</code>, or</li>
<li>basic state that could alternatively be represented with selectors (e.g. <code>ele.selected()</code> is OK because there’s a <code>:selected</code> selector).</li>
</ul>
</li>
<li><strong>Do not</strong> mutate the graph state for <code>cy</code> or for any <code>ele</code> inside your mapper function.</li>
<li><strong>Do not</strong> create cyclic dependencies (i.e. one style property reads the value of another style property).  Your style function should not call functions like <code>ele.style()</code> or <code>ele.numericStyle()</code>.</li>
<li><strong>Do not</strong> use functions if you can use built-in mappers and selectors to express the same thing.  If you use a function, you lose built-in style performance enhancements and you’ll have to optimise and cache the function yourself.</li>
</ul>
</li>
</ul>
<h2 id="style/node-body">Node body <a href="#style/node-body"><span class="fa fa-bookmark"></span></a></h2>
<p>Shape:</p>
<ul>
<li><strong><code>width</code></strong> : The width of the node’s body.  This property can take on the special value <code>label</code> so the width is automatically based on the node’s label.</li>
<li><strong><code>height</code></strong> : The height of the node’s body.  This property can take on the special value <code>label</code> so the height is automatically based on the node’s label.</li>
<li><strong><code>shape</code></strong> : The shape of the node’s body.  Note that each shape fits within the specified <code>width</code> and <code>height</code>, and so you may have to adjust <code>width</code> and <code>height</code> if you desire an equilateral shape (i.e. <code>width !== height</code> for several equilateral shapes).  Only <code>*rectangle</code> shapes are supported by compounds, because the dimensions of a compound are defined by the bounding box of the children.  The following values are accepted:<ul>
<li><code>ellipse</code></li>
<li><code>triangle</code></li>
<li><code>round-triangle</code></li>
<li><code>rectangle</code></li>
<li><code>round-rectangle</code></li>
<li><code>bottom-round-rectangle</code></li>
<li><code>cut-rectangle</code></li>
<li><code>barrel</code></li>
<li><code>rhomboid</code></li>
<li><code>diamond</code></li>
<li><code>round-diamond</code></li>
<li><code>pentagon</code></li>
<li><code>round-pentagon</code></li>
<li><code>hexagon</code></li>
<li><code>round-hexagon</code></li>
<li><code>concave-hexagon</code></li>
<li><code>heptagon</code></li>
<li><code>round-heptagon</code></li>
<li><code>octagon</code></li>
<li><code>round-octagon</code></li>
<li><code>star</code></li>
<li><code>tag</code></li>
<li><code>round-tag</code></li>
<li><code>vee</code></li>
<li><code>polygon</code> (custom polygon specified via <code>shape-polygon-points</code>).</li>
</ul>
</li>
<li><strong><code>shape-polygon-points</code></strong> : An array (or a space-separated string) of numbers ranging on [-1, 1], representing alternating x and y values (i.e. <code>x1 y1   x2 y2,   x3 y3 ...</code>).  This represents the points in the polygon for the node’s shape.  The bounding box of the node is given by (-1, -1), (1, -1), (1, 1), (-1, 1).  The node’s position is the origin (0, 0).</li>
</ul>
<p>Background:</p>
<ul>
<li><strong><code>background-color</code></strong> : The colour of the node’s body.</li>
<li><strong><code>background-blacken</code></strong> : Blackens the node’s body for values from 0 to 1; whitens the node’s body for values from 0 to -1.</li>
<li><strong><code>background-opacity</code></strong> : The opacity level of the node’s background colour.</li>
<li><strong><code>background-fill</code></strong> : The filling style of the node’s body; may be <code>solid</code> (default), <code>linear-gradient</code>, or <code>radial-gradient</code>.</li>
</ul>
<p>Gradient:</p>
<ul>
<li><strong><code>background-gradient-stop-colors</code></strong> : The colours of the background gradient stops (e.g. <code>cyan magenta yellow</code>).</li>
<li><strong><code>background-gradient-stop-positions</code></strong> : The positions of the background gradient stops (e.g. <code>0% 50% 100%</code>). If not specified or invalid, the stops will divide equally.</li>
<li><strong><code>background-gradient-direction</code></strong> : For <code>background-fill: linear-gradient</code>, this property defines the direction of the background gradient.  The following values are accepted:<ul>
<li><code>to-bottom</code> (default)</li>
<li><code>to-top</code></li>
<li><code>to-left</code></li>
<li><code>to-right</code></li>
<li><code>to-bottom-right</code></li>
<li><code>to-bottom-left</code></li>
<li><code>to-top-right</code></li>
<li><code>to-top-left</code></li>
</ul>
</li>
</ul>
<p>Border:</p>
<ul>
<li><strong><code>border-width</code></strong> : The size of the node’s border.</li>
<li><strong><code>border-style</code></strong> : The style of the node’s border; may be <code>solid</code>, <code>dotted</code>, <code>dashed</code>, or <code>double</code>.</li>
<li><strong><code>border-color</code></strong> : The colour of the node’s border.</li>
<li><strong><code>border-opacity</code></strong> : The opacity of the node’s border.</li>
</ul>
<p>Padding:</p>
<p>A padding defines an addition to a node’s dimension.  For example, <code>padding</code> adds to a node’s outer (i.e. total) width and height.  This can be used to add spacing around the label of <code>width: label; height: label;</code> nodes, or it can be used to add spacing between a compound node parent and its children.</p>
<ul>
<li><strong><code>padding</code></strong> : The amount of padding around all sides of the node. Either percentage or pixel value can be specified. For example, both <code>50%</code> and <code>50px</code> are acceptable values. By default, percentage padding is calculated as a percentage of node width.</li>
<li><strong><code>padding-relative-to</code></strong> : Determines how padding is calculated if and only if the percentage unit is used. Accepts one of the keywords specified below.<ul>
<li><strong><code>width</code></strong> : calculate padding as a percentage the node width.</li>
<li><strong><code>height</code></strong> : calculate padding as a percentage of the node height.</li>
<li><strong><code>average</code></strong> : calculate padding as a percentage of the average of the node width and height.</li>
<li><strong><code>min</code></strong> : calculate padding as a percentage of the minimum of the node width and height.</li>
<li><strong><code>max</code></strong> : calculate padding as a percentage of the maximum of the node width and height.</li>
</ul>
</li>
</ul>
<p>Compound parent sizing:</p>
<ul>
<li><strong><code>compound-sizing-wrt-labels</code></strong> : Whether to include labels of descendants in sizing a compound node; may be <code>include</code> or <code>exclude</code>.</li>
<li><strong><code>min-width</code></strong> : Specifies the minimum (inner) width of the node’s body for a compound parent node (e.g. <code>400px</code>).  If the biases for <code>min-width</code> do not add up to 100%, then the biases are normalised to a total of 100%.</li>
<li><strong><code>min-width-bias-left</code></strong> : When a compound node is enlarged by its <code>min-width</code>, this value specifies the percent of the extra width put on the left side of the node (e.g. <code>50%</code>).</li>
<li><strong><code>min-width-bias-right</code></strong> : When a compound node is enlarged by its <code>min-width</code>, this value specifies the percent of the extra width put on the right side of the node (e.g. <code>50%</code>).</li>
<li><strong><code>min-height</code></strong> : Specifies the minimum (inner) height of the node’s body for a compound parent node (e.g. <code>400px</code>).  If the biases for <code>min-height</code> do not add up to 100%, then the biases are normalised to a total of 100%.</li>
<li><strong><code>min-height-bias-top</code></strong> : When a compound node is enlarged by its <code>min-height</code>, this value specifies the percent of the extra width put on the top side of the node (e.g. <code>50%</code>).</li>
<li><strong><code>min-height-bias-bottom</code></strong> : When a compound node is enlarged by its <code>min-height</code>, this value specifies the percent of the extra width put on the bottom side of the node (e.g. <code>50%</code>).</li>
</ul>
<h2 id="style/background-image">Background image <a href="#style/background-image"><span class="fa fa-bookmark"></span></a></h2>
<p>A background image may be applied to a node’s body.  The following properties support multiple values (space separated or array) with associated indices.</p>
<ul>
<li><p><strong><code>background-image</code></strong> : The URL that points to the image that should be used as the node’s background.  PNG, JPG, and SVG are supported formats.</p>
<ul>
<li><p>You may use a <a href="https://en.wikipedia.org/wiki/Data_URI_scheme">data URI</a> to use embedded images, thereby saving a HTTP request.</p>
</li>
<li><p>You can specify multiple background images by separating each image with a space (space delimited format), but if using a non-string stylesheet, then using arrays are preferred.</p>
<ul>
<li>The images will be applied to the node’s body in the order given, layering one on top of each other.</li>
<li>When specifying properties for multiple images, if the property for a given image is not provided, then the default value is used as fallback.</li>
</ul>
</li>
<li><p>To put an image outside of the bounds of a node’s body, it is necessary to specify <code>background-clip: none</code> and <code>bounds-expansion: n</code> for images that go <code>n</code> pixels beyond the bounding box of the node.  Note that values of <code>n</code> should be relatively small for performance.</p>
</li>
<li><p>SVG image considerations:</p>
<ul>
<li><p>Always include this XML header in each SVG image:</p>
<pre><code><span class="hljs-meta">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span><span class="hljs-meta">&lt;!DOCTYPE svg&gt;</span></code></pre></li>
<li><p>Use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent">encodeURIComponent</a> on SVG data URIs.</p>
<pre><code><span class="hljs-title">var</span> <span class="hljs-class"><span class="hljs-keyword">data</span> = '<span class="hljs-keyword">data</span>:image/svg+xml;utf8,' + encodeURIComponent(<span class="hljs-title">svgFile</span>);</span></code></pre></li>
<li><p>Do not use base 64 encoding for SVG within a data URI.</p>
</li>
<li><p>Web fonts (e.g. WOFF, WOFF2) may not work within SVG <code>&lt;text&gt;</code> elements in some browsers.  For best cross-browser compatibility, use native SVG versions of your icons — usually defined as <code>&lt;path&gt;</code> elements.</p>
</li>
<li><p>If you memoize function mappers to generate SVGs procedurally, you may want to have your function return an object like <code>{ svg, width, height }</code>.  This allows you to use the dimensions of the image for other style properties, like node width and height.  E.g.:</p>
<pre><code><span class="hljs-keyword">var</span> makeSvg = memoize(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(ele)</span></span>{
  <span class="hljs-comment">// impl...</span>

  <span class="hljs-keyword">return</span> { svg: s, width: w, height: h };
});
<span class="hljs-comment">//</span>
<span class="hljs-comment">// ...</span>
<span class="hljs-comment">//</span>
<span class="hljs-comment">// init stylesheet</span>
<span class="hljs-keyword">var</span> options = {
  style: [
    {
      selector: <span class="hljs-string">'node'</span>,
      style: {
        <span class="hljs-string">'background-image'</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(ele)</span></span>{ <span class="hljs-keyword">return</span> makeSvg(ele).svg; },
        <span class="hljs-string">'width'</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(ele)</span></span>{ <span class="hljs-keyword">return</span> makeSvg(ele).width; },
        <span class="hljs-string">'height'</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(ele)</span></span>{ <span class="hljs-keyword">return</span> makeSvg(ele).height; }
      }
    }
  ]
};</code></pre></li>
<li><p>Using the <code>viewbox</code> attribute in SVG images may cause rendering problems in Firefox.</p>
</li>
<li><p>SVG images may not work consistently in Internet Explorer.</p>
</li>
<li><p>The <a href="https://github.com/PathwayCommons/cytoscape-sbgn-stylesheet"><code>cytoscape-sbgn-stylesheet</code></a> package serves as a good example for the use of SVG images in a stylesheet.  That stylesheet <a href="https://pathwaycommons.github.io/cytoscape-sbgn-stylesheet/">creates decorations</a> on nodes in line with the <a href="https://sbgn.github.io">SBGN standard</a>.</p>
</li>
</ul>
</li>
</ul>
</li>
<li><p><strong><code>background-image-crossorigin</code></strong>: All images are loaded with a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin"><code>crossorigin</code></a> attribute which may be <code>anonymous</code> or <code>use-credentials</code>. The default is set to <code>anonymous</code>.</p>
</li>
<li><p><strong><code>background-image-opacity</code></strong> : The opacity of the background image.</p>
</li>
<li><p><strong><code>background-width</code></strong> : Specifies the width of the image.  A percent value (e.g. <code>50%</code>) may be used to set the image width relative to the node width.  If used in combination with <code>background-fit</code>, then this value overrides the width of the image in calculating the fitting — thereby overriding the aspect ratio.  The <code>auto</code> value is used by default, which uses the width of the image.</p>
</li>
<li><p><strong><code>background-height</code></strong> : Specifies the height of the image.  A percent value (e.g. <code>50%</code>) may be used to set the image height relative to the node height.  If used in combination with <code>background-fit</code>, then this value overrides the height of the image in calculating the fitting — thereby overriding the aspect ratio.  The <code>auto</code> value is used by default, which uses the height of the image.</p>
</li>
<li><p><strong><code>background-fit</code></strong> : How the background image is fit to the node; may be <code>none</code> for original size, <code>contain</code> to fit inside node, or <code>cover</code> to cover the node.</p>
</li>
<li><p><strong><code>background-repeat</code></strong> : Whether to repeat the background image; may be <code>no-repeat</code>, <code>repeat-x</code>, <code>repeat-y</code>, or <code>repeat</code>.</p>
</li>
<li><p><strong><code>background-position-x</code></strong> : The x position of the background image, measured in percent (e.g. <code>50%</code>) or pixels (e.g. <code>10px</code>).</p>
</li>
<li><p><strong><code>background-position-y</code></strong> : The y position of the background image, measured in percent (e.g. <code>50%</code>) or pixels (e.g. <code>10px</code>).</p>
</li>
<li><p><strong><code>background-offset-x</code></strong> : The x offset of the background image, measured in percent (e.g. <code>50%</code>) or pixels (e.g. <code>10px</code>).</p>
</li>
<li><p><strong><code>background-offset-y</code></strong> : The y offset of the background image, measured in percent (e.g. <code>50%</code>) or pixels (e.g. <code>10px</code>).</p>
</li>
<li><p><strong><code>background-width-relative-to</code></strong> : Changes whether the width is calculated relative to the width of the node or the width in addition to the padding; may be <code>inner</code> or <code>include-padding</code>. If not specified, <code>include-padding</code> is used by default.</p>
</li>
<li><p><strong><code>background-height-relative-to</code></strong> : Changes whether the height is calculated relative to the height of the node or the height in addition to the padding; may be <code>inner</code> or <code>include-padding</code>. If not specified, <code>include-padding</code> is used by default.</p>
</li>
<li><p><strong><code>background-clip</code></strong> : How background image clipping is handled; may be <code>node</code> for clipped to node shape or <code>none</code> for no clipping.</p>
</li>
</ul>
<p>The following properties apply to all images of a node:</p>
<ul>
<li><strong><code>bounds-expansion</code></strong> : Specifies a padding size (e.g. <code>20px</code>) that expands the bounding box of the node in all directions.  This allows for images to be drawn outside of the normal bounding box of the node when <code>background-clip</code> is <code>none</code>.  This is useful for small decorations just outside of the node. <code>bounds-expansions</code> accepts 1 value (for all directions), 2 values, (<code>[topAndBottom, leftAndRight]</code>) or 4 values (<code>[top, right, bottom, left]</code>).</li>
</ul>
<p>The following is an example of valid background image styling using JSON. The example images are taken from Wikimedia Commons with the Creative Commons license.</p>
<pre><code>{
  'background-image': [
    'https://upload.wikimedia.org/wikipedia/commons/b/b4/High_above_the_Cloud_the_Sun_Stays_the_Same.jpg',
    'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Pigeon_silhouette_<span class="hljs-number">4874</span>.svg/<span class="hljs-number">1000</span>px-Pigeon_silhouette_<span class="hljs-number">4874</span>.svg.png'
  ],
  'background-fit': 'cover cover',
  'background-image-opacity': <span class="hljs-number">0.5</span>
}</code></pre><h2 id="style/pie-chart-background">Pie chart background <a href="#style/pie-chart-background"><span class="fa fa-bookmark"></span></a></h2>
<p>These properties allow you to create pie chart backgrounds on nodes (<a href="demos/pie-style">demo</a>).  Note that 16 slices maximum are supported per node, so in the properties <code>1 &lt;= i &lt;= 16</code>.  Of course, you must specify a numerical value for each property in place of <code>i</code>.  Each nonzero sized slice is placed in order of <code>i</code>, starting from the 12 o’clock position and working clockwise.</p>
<p>You may find it useful to reserve a number to a particular colour for all nodes in your stylesheet.  Then you can specify values for <code>pie-i-background-size</code> accordingly for each node via a <a href="#style/mappers">mapper</a>.  This would allow you to create consistently coloured pie charts in each node of the graph based on element data.</p>
<ul>
<li><strong><code>pie-size</code></strong> : The diameter of the pie, measured as a percent of node size (e.g. <code>100%</code>) or an absolute length (e.g. <code>25px</code>).</li>
<li><strong><code>pie-i-background-color</code></strong> : The colour of the node’s ith pie chart slice.</li>
<li><strong><code>pie-i-background-size</code></strong> : The size of the node’s ith pie chart slice, measured in percent (e.g. <code>25%</code> or <code>25</code>).</li>
<li><strong><code>pie-i-background-opacity</code></strong> : The opacity of the node’s ith pie chart slice.</li>
</ul>
<h2 id="style/edge-line">Edge line <a href="#style/edge-line"><span class="fa fa-bookmark"></span></a></h2>
<p>These properties affect the styling of an edge’s line:</p>
<ul>
<li><strong><code>width</code></strong> : The width of an edge’s line.</li>
<li><strong><code>curve-style</code></strong> : The curving method used to separate two or more edges between two nodes (<a href="demos/edge-types">demo</a>); may be <a href="#style/haystack-edges"><code>haystack</code></a> (default, very fast, bundled straight edges for which loops and compounds are unsupported), <a href="#style/straight-edges"><code>straight</code></a> (straight edges with all arrows supported), <a href="#style/bezier-edges"><code>bezier</code></a> (bundled curved edges), <a href="#style/unbundled-bezier-edges"><code>unbundled-bezier</code></a> (curved edges for use with manual control points),  <a href="#style/segments-edges"><code>segments</code></a> (a series of straight lines), <a href="#style/taxi-edges"><code>taxi</code></a> (right-angled lines, hierarchically bundled).  Note that <code>haystack</code> edges work best with <code>ellipse</code>, <code>rectangle</code>, or similar nodes.  Smaller node shapes, like <code>triangle</code>, will not be as aesthetically pleasing.  Also note that edge endpoint arrows are unsupported for <code>haystack</code> edges.</li>
<li><strong><code>line-color</code></strong> : The colour of the edge’s line.</li>
<li><strong><code>line-style</code></strong> : The style of the edge’s line; may be <code>solid</code>, <code>dotted</code>, or <code>dashed</code>.</li>
<li><strong><code>line-cap</code></strong> : The cap style of the edge’s line; may be <code>butt</code> (default), <code>round</code>, or <code>square</code>.  The cap may or may not be visible, depending on the shape of the node and the relative size of the node and edge.  Caps other than <code>butt</code> extend beyond the specified endpoint of the edge.</li>
<li><strong><code>line-fill</code></strong> : The filling style of the edge’s line; may be <code>solid</code> (default), <code>linear-gradient</code> (source to target), or <code>radial-gradient</code> (midpoint outwards).</li>
<li><strong><code>line-dash-pattern</code></strong> : The <code>dashed</code> line pattern which specifies alternating lengths of lines and gaps. (e.g. <code>[6, 3]</code>).</li>
<li><strong><code>line-dash-offset</code></strong> : The <code>dashed</code> line offset (e.g. <code>24</code>). It is useful for creating edge animations.</li>
</ul>
<h2 id="style/gradient">Gradient <a href="#style/gradient"><span class="fa fa-bookmark"></span></a></h2>
<ul>
<li><strong><code>line-gradient-stop-colors</code></strong> : The colours of the gradient stops (e.g. <code>cyan magenta yellow</code>).</li>
<li><strong><code>line-gradient-stop-positions</code></strong> : The positions of the gradient stops (e.g. <code>0% 50% 100%</code>). If not specified (or invalid), the stops will divide equally.</li>
</ul>
<h2 id="style/bezier-edges">Bezier edges <a href="#style/bezier-edges"><span class="fa fa-bookmark"></span></a></h2>
<p>For automatic, bundled bezier edges (<code>curve-style: bezier</code>, <a href="demos/edge-types">demo</a>):</p>
<p>A bezier edge is bundled with all other parallel bezier edges.  Each bezier edge is a <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B%C3%A9zier_curves">quadratic bezier curve</a>, separated from the others by varying the  curvature.  If there is an odd number of parallel edges in a bundle, then the centre edge is drawn as a straight line.</p>
<ul>
<li><strong><code>control-point-step-size</code></strong> : Along the line perpendicular from source to target, this value specifies the distance between successive bezier edges.</li>
<li><strong><code>control-point-distance</code></strong> : A single value that overrides <code>control-point-step-size</code> with a manual value.  Because it overrides the step size, bezier edges with the same value will overlap.  Thus, it’s best to use this as a one-off value for particular edges if need be.</li>
<li><strong><code>control-point-weight</code></strong> : A single value that weights control points along the line from source to target.  The value usually ranges on [0, 1], with 0 towards the source node and 1 towards the target node — but larger or smaller values can also be used.</li>
<li><strong><code>edge-distances</code></strong> : With value <code>intersection</code> (default), the line from source to target for <code>control-point-weight</code> is from the outside of the source node’s shape to the outside of the target node’s shape.  With value <code>node-position</code>, the line is from the source position to the target position.  The <code>node-position</code> option makes calculating edge points easier — but it should be used carefully because you can create invalid points that <code>intersection</code> would have automatically corrected.</li>
</ul>
<h2 id="style/loop-edges">Loop edges <a href="#style/loop-edges"><span class="fa fa-bookmark"></span></a></h2>
<p>For loops (i.e. same source and target, <a href="demos/edge-types">demo</a>):</p>
<p>A loop is normally drawn as a pair of <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B%C3%A9zier_curves">quadratic bezier curves</a>, one bezier going away from the node and the second bezier going back towards the node.</p>
<ul>
<li><strong><code>loop-direction</code></strong> : Determines the angle that loops extend from the node in cases when the source and target node of an edge is the same.  The angle is specified from the 12 o’clock position and it progresses clockwise for increasing positive values. The default is <code>-45deg</code> (extending to the upper left).</li>
<li><strong><code>loop-sweep</code></strong> : Determines the angle between the leaving and returning edges in loops. Positive values result in clockwise looping and negative values result in counter-clockwise looping. Default is <code>-90deg</code>.</li>
</ul>
<p>Note that loops may only be <code>bezier</code> or <code>unbundled-bezier</code> for their <code>curve-style</code>.</p>
<h2 id="style/unbundled-bezier-edges">Unbundled bezier edges <a href="#style/unbundled-bezier-edges"><span class="fa fa-bookmark"></span></a></h2>
<p>For bezier edges with manual control points (<code>curve-style: unbundled-bezier</code>, <a href="demos/edge-types">demo</a>):</p>
<p>An unbundled bezier edge is made of a series of one or more <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B%C3%A9zier_curves">quadratic bezier curves</a> — one control point per curve.  The control points of unbundled bezier curves are specified manually, using a co-ordinate system relative to the source and target node.  This maintains the overall curve shape regardless of the positions of the connected nodes.</p>
<p>A quadratic bezier curve is specified by three points.  Those points include the start point (P0), the centre control point (P1), and the end point (P2).  Traditionally, all three points are called “control points”, but only the centre control point (P1) is referred to as the “control point” within this documentation for brevity and clarity.</p>
<p>The start point (P0) for the first quadratic bezier curve in the series is specified by <code>source-endpoint</code>.  The end point (P2) for the last quadratic bezier curve in the series is specified by <code>target-endpoint</code>.</p>
<p>When two or more control points are specified for an unbundled bezier edge, each adjacent pair of bezier curves is joined at the midpoint of the two control points.  In other words, the start point (P0) and end point (P2) for a quadratic bezier curve in the middle of the series are set implicitly.  This makes most curves join smoothly.</p>
<ul>
<li><strong><code>control-point-distances</code></strong> : A series of values that specify for each control point the distance perpendicular to a line formed from source to target, e.g. <code>-20 20 -20</code>.</li>
<li><strong><code>control-point-weights</code></strong> : A series of values that weights control points along a line from source to target, e.g. <code>0.25 0.5 0.75</code>.  A value usually ranges on [0, 1], with 0 towards the source node and 1 towards the target node — but larger or smaller values can also be used.</li>
<li><strong><code>edge-distances</code></strong> : With value <code>intersection</code> (default), the line from source to target for <code>control-point-weights</code> is from the outside of the source node’s shape to the outside of the target node’s shape.  With value <code>node-position</code>, the line is from the source position to the target position.  The <code>node-position</code> option makes calculating edge points easier — but it should be used carefully because you can create invalid points that <code>intersection</code> would have automatically corrected.</li>
</ul>
<h2 id="style/haystack-edges">Haystack edges <a href="#style/haystack-edges"><span class="fa fa-bookmark"></span></a></h2>
<p>For fast, straight line edges (<code>curve-style: haystack</code>, <a href="demos/edge-types">demo</a>):</p>
<p>Haystack edges are a more performant replacement for plain, straight line edges.  A haystack edge is drawn as a straight line from the source node to the target node, randomly placed along some angle from each node’s centre.  In this manner, many parallel haystack edges make a tight bundle, especially when semitransparent.  This makes haystack edges an effective way to visualise graphs with a high number of parallel edges.</p>
<p><span class="important-indicator"></span> Loop edges and compound parent nodes are not supported by haystack edges.  Also note that source and target arrows are not supported for haystack edges, as the arrows would be behind the node body.  Mid arrows, however, are supported.</p>
<ul>
<li><strong><code>haystack-radius</code></strong> : A value between 0 and 1 inclusive that indicates the relative radius used to position haystack edges on their connected nodes.  The outside of the node is at 1, and the centre of the node is at 0.  For simple graphs, a radius of 0 makes sense.</li>
</ul>
<h2 id="style/segments-edges">Segments edges <a href="#style/segments-edges"><span class="fa fa-bookmark"></span></a></h2>
<p>For edges made of several straight lines (<code>curve-style: segments</code>, <a href="demos/edge-types">demo</a>):</p>
<p>A segment edge is made of a series of one or more straight lines, using a co-ordinate system relative to the source and target nodes.  This maintains the overall line pattern regardless of the orientation of the positions of the source and target nodes.</p>
<ul>
<li><strong><code>segment-distances</code></strong> : A series of values that specify for each segment point the distance perpendicular to a line formed from source to target, e.g. <code>-20 20 -20</code>.</li>
<li><strong><code>segment-weights</code></strong> : A series of values that weights segment points along a line from source to target, e.g. <code>0.25 0.5 0.75</code>.  A value usually ranges on [0, 1], with 0 towards the source node and 1 towards the target node — but larger or smaller values can also be used.</li>
<li><strong><code>edge-distances</code></strong> : With value <code>intersection</code> (default), the line from source to target for <code>segment-weights</code> is from the outside of the source node’s shape to the outside of the target node’s shape.  With value <code>node-position</code>, the line is from the source position to the target position.  The <code>node-position</code> option makes calculating edge points easier — but it should be used carefully because you can create invalid points that <code>intersection</code> would have automatically corrected.</li>
</ul>
<h2 id="style/straight-edges">Straight edges <a href="#style/straight-edges"><span class="fa fa-bookmark"></span></a></h2>
<p>For straight line edges (<code>curve-style: straight</code>, <a href="demos/edge-types">demo</a>):</p>
<p>A straight edge (<code>curve-style: straight</code>) is drawn as a single straight line from the outside of the source node shape to the outside of the target node shape.  Endpoint and midpoint arrows are supported on straight edges.  Straight edges are not generally suitable for multigraphs.</p>
<h2 id="style/taxi-edges">Taxi edges <a href="#style/taxi-edges"><span class="fa fa-bookmark"></span></a></h2>
<p>For hierarchical, bundled edges (<code>curve-style: taxi</code>, <a href="demos/edge-types">demo</a>):</p>
<p>A taxi edge (<code>curve-style: taxi</code>) is drawn as a series of right-angled lines (i.e. in <a href="https://en.wikipedia.org/wiki/Taxicab_geometry">taxicab geometry</a>).  The edge has a primary direction along either the x-axis or y-axis, which can be used to bundle edges in a hierarchy.  That is, taxi edges are appropriate for trees and DAGs that are laid out in a hierarchical manner.</p>
<p>A taxi edge has at most two visible turns:  Starting from the source node, the edge goes in the primary direction for the specified distance.  The edge then turns, going towards the target along the secondary axis.  The first turn can be specified in order to bundle the edges of outgoing nodes.  The second turn is implicit, based on the first turn, going the remaining distance along the main axis.</p>
<p>When a taxi edge would be impossible to draw along the regular turning plan — i.e. one or more turns is too close the source or target — it is re-routed.  The re-routing is carried out on a best-effort basis:  Re-routing prioritises the specified direction for bundling over the specified turn distance.  A <code>downward</code> edge, for example, will avoid going in the upward direction where possible.  In practice, re-routing should not take place for graphs that are well laid out.</p>
<p><span class="important-indicator"></span> Only <code>outside-to-node</code> endpoints are supported for a taxi edge, i.e. <code>source-endpoint: outside-to-node</code> and <code>target-endpoint: outside-to-node</code>.</p>
<ul>
<li><strong><code>taxi-direction</code></strong> : The main direction of the edge, the direction starting out from the source node; may be one of:<ul>
<li><code>auto</code> : Automatically use <code>vertical</code> or <code>horizontal</code>, based on whether the vertical or horizontal distance is largest.</li>
<li><code>vertical</code> : Automatically use <code>downward</code> or <code>upward</code>, based on the vertical direction from source to target.</li>
<li><code>downward</code> : Bundle outgoers downwards.</li>
<li><code>upward</code> : Bundle outgoers upwards.</li>
<li><code>horizontal</code> : Automatically use <code>righward</code> or <code>leftward</code>, based on the horizontal direction from source to target.</li>
<li><code>rightward</code> : Bundle outgoers righwards.</li>
<li><code>leftward</code> : Bundle outgoers leftwards.</li>
</ul>
</li>
<li><strong><code>taxi-turn</code></strong> : The distance along the primary axis where the first turn is applied.<ul>
<li>This value may be an absolute distance (e.g. <code>20px</code>) or it may be a relative distance between the source and target (e.g. <code>50%</code>).</li>
<li>A negative value may be specified to indicate a distance in the oppostite, target to source direction (e.g. <code>-20px</code>).</li>
<li>Note that bundling may not work with an explicit direction (<code>upward</code>, <code>downward</code>, <code>leftward</code>, or <code>rightward</code>) in tandem with a turn distance specified in percent units.</li>
</ul>
</li>
<li><strong><code>taxi-turn-min-distance</code></strong> : The minimum distance along the primary axis that is maintained between the nodes and the turns.<ul>
<li>This value only takes on absolute values (e.g. <code>5px</code>).</li>
<li>This property makes the taxi edge be re-routed when the turns would be otherwise too close to the source or target.  As such, it also helps to avoid turns overlapping edge endpoint arrows.</li>
</ul>
</li>
<li><strong><code>edge-distances</code></strong> : With value <code>intersection</code> (default), the distances (<code>taxi-turn</code> and <code>taxi-turn-min-distance</code>) are considered from the outside of the source’s bounds to the outside of the target’s bounds.  With value <code>node-position</code>, the distances are considered from the source position to the target position.  The <code>node-position</code> option makes calculating edge points easier — but it should be used carefully because you can create invalid points that <code>intersection</code> would have automatically corrected.</li>
</ul>
<h2 id="style/edge-arrow">Edge arrow <a href="#style/edge-arrow"><span class="fa fa-bookmark"></span></a></h2>
<ul>
<li><strong><code>&lt;pos&gt;-arrow-color</code></strong> : The colour of the edge’s source arrow.</li>
<li><strong><code>&lt;pos&gt;-arrow-shape</code></strong> : The shape of the edge’s source arrow (<a href="demos/edge-arrows">demo</a>); may be one of:<ul>
<li><code>triangle</code></li>
<li><code>triangle-tee</code></li>
<li><code>triangle-cross</code></li>
<li><code>triangle-backcurve</code></li>
<li><code>vee</code></li>
<li><code>tee</code></li>
<li><code>square</code></li>
<li><code>circle</code></li>
<li><code>diamond</code></li>
<li><code>chevron</code></li>
<li><code>none</code></li>
</ul>
</li>
<li><strong><code>&lt;pos&gt;-arrow-fill</code></strong> : The fill state of the edge’s source arrow; may be <code>filled</code> or <code>hollow</code>.</li>
<li><strong><code>arrow-scale</code></strong> : Scaling for the arrow size; may be any number &gt;= 0.</li>
</ul>
<p>For each edge arrow property above, replace <code>&lt;pos&gt;</code> with one of</p>
<ul>
<li><code>source</code> : Pointing towards the source node, at the end of the edge.</li>
<li><code>mid-source</code> : Pointing towards the source node, at the middle of the edge.</li>
<li><code>target</code> : Pointing towards the target node, at the end of the edge.</li>
<li><code>mid-target</code>: Pointing towards the target node, at the middle of the edge.</li>
</ul>
<p>Only mid arrows are supported on haystack edges.</p>
<h2 id="style/edge-endpoints">Edge endpoints <a href="#style/edge-endpoints"><span class="fa fa-bookmark"></span></a></h2>
<p><code>source-endpoint</code> &amp; <code>target-endpoint</code> : Specifies the endpoint of the source side of the edge and the target side of the edge, respectively.  There are several options for how those properties can be set:</p>
<ul>
<li>A special, named value may be used.<ul>
<li><code>outside-to-node</code> (default) indicates that the edge should be placed automatically to point towards the node’s position and be placed on the outside of the node’s shape.</li>
<li><code>outside-to-node-or-label</code> uses the same rules as <code>outside-to-node</code> with the added rule that if the node’s label would intersect the edge before the node’s body, then the edge points to that intersection point.  This avoids overlap of edges with node labels.</li>
<li><code>inside-to-node</code> indicates the edge should go all the way inside the node and point directly on the node’s position.  This is the same as specifying <code>0 0</code>.</li>
<li><code>outside-to-line</code> indicates the edge endpoint should be placed outside the node’s shape where it would intersect the imaginary line from the source position to the target position.  This value is useful for automatically  avoiding invalid cases for bezier edges, especially with compound nodes.</li>
<li><code>outside-to-line-or-label</code> uses the same rules as <code>outside-to-line</code> with the added rule that if the node’s label would intersect the imaginary line before the node’s body, then the edge points to that intersection point.  This avoids overlap of edges with node labels.</li>
</ul>
</li>
<li>Two numbers may specify the endpoint.  The numbers indicate a position relative to the node’s position.  The numbers can be specified as percent values (e.g. <code>50%</code>, which are relative to the node’s width and height respectively) or as absolute distances (e.g. <code>100px</code> or <code>2em</code>).</li>
<li>A single angle value (e.g. <code>90deg</code> or <code>1.57rad</code>) may specify that the endpoint should be placed on the node’s border at the specified angle.  The angle starts at 12 o’clock and progresses clockwise.</li>
</ul>
<p>The endpoints for edges can be shifted away from the source and target node:</p>
<ul>
<li><strong><code>source-distance-from-node</code></strong> : A value that shifts the edge away from the source node (default <code>0px</code>).</li>
<li><strong><code>target-distance-from-node</code></strong> : A value that shifts the edge away from the target node (default <code>0px</code>).</li>
</ul>
<p>Endpoint modification is not supported for <code>curve-style: haystack</code> edges for performance reasons.</p>
<h2 id="style/visibility">Visibility <a href="#style/visibility"><span class="fa fa-bookmark"></span></a></h2>
<ul>
<li><strong><code>display</code></strong> : Whether to display the element; may be <code>element</code> for displayed or <code>none</code> for not displayed.<ul>
<li>A <code>display: none</code> element does not take up space.<ul>
<li>A <code>display: none</code> bundled bezier edge does not take up space in its bundle.</li>
<li>A <code>display: none</code> node hides its connected edges.</li>
<li>A <code>display: none</code> node is considered a point rather than an area in layouts, affecting things like overlap avoidance.</li>
<li>A <code>display: none</code> element is not taken into consideration for viewport fitting.</li>
</ul>
</li>
<li>A <code>display: none</code> element is not interactive.</li>
</ul>
</li>
<li><strong><code>visibility</code></strong> : Whether the element is visible; may be <code>visible</code> or <code>hidden</code>.<ul>
<li>A <code>visibility: hidden</code> element does take up space.<ul>
<li>A <code>visibility: hidden</code> bundled bezier edge does take up space in its bundle.</li>
<li>A <code>visibility: hidden</code> node does not hide its connected edges.</li>
<li>A <code>visibility: hidden</code> element is considered normally by layouts.</li>
<li>A <code>visibility: hidden</code> element is taken into consideration for viewport fitting.</li>
</ul>
</li>
<li>A <code>visibility: hidden</code> element is not interactive.</li>
</ul>
</li>
<li><strong><code>opacity</code></strong> : The opacity of the element, ranging from 0 to 1.  Note that the opacity of a compound node parent affects the effective opacity of its children.<ul>
<li>An <code>opacity: 0</code> element does take up space.<ul>
<li>An <code>opacity: 0</code> bundled bezier edge does take up space in its bundle.</li>
<li>An <code>opacity: 0</code> node does not hide its connected edges.</li>
<li>An <code>opacity: 0</code> element is considered normally by layouts.</li>
<li>An <code>opacity: 0</code> element is taken into consideration for viewport fitting.</li>
</ul>
</li>
<li>An <code>opacity: 0</code> element is interactive.</li>
</ul>
</li>
<li><strong><code>z-index</code></strong> : An integer value that affects the relative draw order of elements.  In general, an element with a higher <code>z-index</code> will be drawn on top of an element with a lower <code>z-index</code>.  Note that edges are under nodes despite <code>z-index</code>, except when necessary for compound nodes.</li>
</ul>
<p>Elements are drawn in a specific order based on compound depth (low to high), the element type (typically nodes above edges), and z-index (low to high).  These styles affect the ordering:</p>
<ul>
<li><strong><code>z-compound-depth</code></strong> : May be <code>bottom</code>, <code>orphan</code>, <code>auto</code> (default), or <code>top</code>.  The first drawn is <code>bottom</code>, the second is <code>orphan</code>, which is the same depth as the root of the compound graph, followed by the default of <code>auto</code> which draws in depth order from root to leaves of the compound graph.  The last drawn is <code>top</code>.  It does not usually make sense to set this value for non-compound graphs.</li>
<li><strong><code>z-index-compare</code></strong>: May be <code>auto</code> (default) or <code>manual</code>.  The <code>auto</code> setting draws edges under nodes, whereas <code>manual</code> ignores this convention and draws solely based on the <code>z-index</code> value.</li>
<li><strong><code>z-index</code></strong> : An integer value that affects the relative draw order of elements.  In general, an element with a higher <code>z-index</code> will be drawn on top of an element with a lower <code>z-index</code> within the same depth.</li>
</ul>
<h2 id="style/labels">Labels <a href="#style/labels"><span class="fa fa-bookmark"></span></a></h2>
<p>Label text:</p>
<ul>
<li><strong><code>label</code></strong> : The text to display for an element’s label (<a href="demos/labels">demo</a>).</li>
<li><strong><code>source-label</code></strong> : The text to display for an edge’s source label.</li>
<li><strong><code>target-label</code></strong> : The text to display for an edge’s target label.</li>
</ul>
<p>Basic font styling:</p>
<ul>
<li><strong><code>color</code></strong> :  The colour of the element’s label.</li>
<li><strong><code>text-opacity</code></strong> : The opacity of the label text, including its outline.</li>
<li><strong><code>font-family</code></strong> : A <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family">comma-separated list of font names</a> to use on the label text.</li>
<li><strong><code>font-size</code></strong> : The size of the label text.</li>
<li><strong><code>font-style</code></strong> : A <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-style">CSS font style</a> to be applied to the label text.</li>
<li><strong><code>font-weight</code></strong> : A <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight">CSS font weight</a> to be applied to the label text.</li>
<li><strong><code>text-transform</code></strong> : A transformation to apply to the label text; may be <code>none</code>,
<code>uppercase</code>, or <code>lowercase</code>.</li>
</ul>
<p>Wrapping text:</p>
<ul>
<li><strong><code>text-wrap</code></strong> : A wrapping style to apply to the label text; may be <code>none</code> for no wrapping (including manual newlines: <code>\n</code>), <code>wrap</code> for manual and/or autowrapping, or <code>ellipsis</code> to truncate the string and append ‘…’ based on <code>text-max-width</code>.  Note that with <code>wrap</code>, text will always wrap on newlines (<code>\n</code>) and text may wrap on any breakable whitespace character — including <a href="https://en.wikipedia.org/wiki/Zero-width_space">zero-width spaces</a> (<code>\u200b</code>).</li>
<li><strong><code>text-max-width</code></strong> : The maximum width for wrapped text, applied when <code>text-wrap</code> is set to <code>wrap</code> or <code>ellipsis</code>.  For only manual newlines (i.e. <code>\n</code>), set a very large value like <code>1000px</code> such that only your newline characters would apply.</li>
<li><strong><code>text-overflow-wrap</code></strong> : The characters that may be used for possible wrapping locations when a line overflows <code>text-max-width</code>; may be <code>whitespace</code> (default) or <code>anywhere</code>.  Note that <code>anywhere</code> is suited to <a href="https://en.wikipedia.org/wiki/CJK_characters">CJK</a>, where the characters are in a grid and no whitespace exists.  Using <code>anywhere</code> with text in the Latin alphabet, for example, will split words at arbitrary locations.</li>
<li><code>text-justification</code>** : The justification of multiline (wrapped) labels; may be <code>left</code>, <code>center</code>, <code>right</code>, or <code>auto</code> (default).  The <code>auto</code> value makes it so that a node’s label is justified along the node — e.g. a label on the right side of a node is left justified.</li>
<li><strong><code>line-height</code></strong> : The line height of multiline text, as a relative, unitless value.  It specifies the vertical spacing between each line.  With value <code>1</code> (default), the lines are stacked directly on top of one another with no additional whitespace between them.  With value <code>2</code>, for example, there is whitespace between each line equal to the visible height of a line of text.</li>
</ul>
<p>Node label alignment:</p>
<ul>
<li><strong><code>text-halign</code></strong> : The vertical alignment of a node’s label; may have value <code>left</code>, <code>center</code>, or <code>right</code>.</li>
<li><strong><code>text-valign</code></strong> : The vertical alignment of a node’s label; may have value <code>top</code>, <code>center</code>, or <code>bottom</code>.</li>
</ul>
<p>Edge label alignment:</p>
<ul>
<li><strong><code>source-text-offset</code></strong> : For the source label of an edge, how far from the source node the label should be placed.</li>
<li><strong><code>target-text-offset</code></strong> : For the target label of an edge, how far from the target node the label should be placed.</li>
</ul>
<p>Margins:</p>
<ul>
<li><strong><code>text-margin-x</code></strong> : A margin that shifts the label along the x-axis.</li>
<li><strong><code>text-margin-y</code></strong> : A margin that shifts the label along the y-axis.</li>
<li><strong><code>source-text-margin-x</code></strong> : (For the source label of an edge.)</li>
<li><strong><code>source-text-margin-y</code></strong> : (For the source label of an edge.)</li>
<li><strong><code>target-text-margin-x</code></strong> : (For the target label of an edge.)</li>
<li><strong><code>target-text-margin-y</code></strong> : (For the target label of an edge.)</li>
</ul>
<p>Rotating text:</p>
<ul>
<li><strong><code>text-rotation</code></strong> : A rotation angle that is applied to the label.<ul>
<li>Rotations are clockwise.</li>
<li>For edges, the special value <code>autorotate</code> can be used to align the label to the edge.</li>
<li>For nodes, the label is rotated along its anchor point on the node, so a label margin may help for some usecases.</li>
<li>The special value <code>none</code> can be used to denote <code>0deg</code>.</li>
<li>Rotations works best with left-to-right text.</li>
</ul>
</li>
<li><strong><code>source-text-rotation</code></strong> : (For the source label of an edge.)</li>
<li><strong><code>target-text-rotation</code></strong> : (For the target label of an edge.)</li>
</ul>
<p>Outline:</p>
<ul>
<li><strong><code>text-outline-color</code></strong> : The colour of the outline around the element’s label text.</li>
<li><strong><code>text-outline-opacity</code></strong> : The opacity of the outline on label text.</li>
<li><strong><code>text-outline-width</code></strong> : The size of the outline on label text.</li>
</ul>
<p>Background:</p>
<ul>
<li><strong><code>text-background-color</code></strong> : A colour to apply on the text background.</li>
<li><strong><code>text-background-opacity</code></strong> : The opacity of the label background; the background is disabled for <code>0</code> (default value).</li>
<li><strong><code>text-background-shape</code></strong> : The shape to use for the label background, can be <code>rectangle</code> or <code>round-rectangle</code>.</li>
<li><strong><code>text-background-padding</code></strong> : A padding on the background of the label (e.g <code>5px</code>); zero padding is used by default.</li>
</ul>
<p>Border:</p>
<ul>
<li><strong><code>text-border-opacity</code></strong> : The width of the border around the label; the border is disabled for <code>0</code> (default value).</li>
<li><strong><code>text-border-width</code></strong> : The width of the border around the label.</li>
<li><strong><code>text-border-style</code></strong> : The style of the border around the label; may be <code>solid</code>, <code>dotted</code>, <code>dashed</code>, or <code>double</code>.</li>
<li><strong><code>text-border-color</code></strong> : The colour of the border around the label.</li>
</ul>
<p>Interactivity:</p>
<ul>
<li><strong><code>min-zoomed-font-size</code></strong> : If zooming makes the effective font size of the label smaller than this, then no label is shown.  Note that because of performance optimisations, the label may be shown at font sizes slightly smaller than this value.  This effect is more pronounced at larger screen pixel ratios.  However, it is guaranteed that the label will be shown at sizes equal to or greater than the value specified.</li>
<li><strong><code>text-events</code></strong> : Whether events should occur on an element if the label receives an event; may be <code>yes</code> or <code>no</code>.  You may want a style applied to the text on <code>:active</code> so you know the text is activatable.</li>
</ul>
<h2 id="style/events">Events <a href="#style/events"><span class="fa fa-bookmark"></span></a></h2>
<ul>
<li><strong><code>events</code></strong> : Whether events should occur on an element (e.g. <code>tap</code>, <code>mouseover</code>, etc.); may be <code>yes</code> or <code>no</code>.  For <code>no</code>, the element receives no events and events simply pass through to the core/viewport.  The <code>events</code> property is per-element, so the value of a compound parent does not affect its children.</li>
<li><strong><code>text-events</code></strong> : Whether events should occur on an element if the label receives an event; may be <code>yes</code> or <code>no</code>.  You may want a style applied to the text on <code>:active</code> so you know the text is activatable.</li>
</ul>
<h2 id="style/overlay">Overlay <a href="#style/overlay"><span class="fa fa-bookmark"></span></a></h2>
<p>These properties allow for the creation of overlays on top of nodes or edges, and are often used in the <code>:active</code> state.</p>
<ul>
<li><strong><code>overlay-color</code></strong> : The colour of the overlay.</li>
<li><strong><code>overlay-padding</code></strong> : The area outside of the element within which the overlay is shown.</li>
<li><strong><code>overlay-opacity</code></strong> : The opacity of the overlay.</li>
</ul>
<h2 id="style/ghost">Ghost <a href="#style/ghost"><span class="fa fa-bookmark"></span></a></h2>
<p>The ghost properties allow for creating a ghosting effect, a semitransparent duplicate of the element drawn at an offset.</p>
<ul>
<li><strong><code>ghost</code></strong> : Whether to use the ghost effect; may be <code>yes</code> or <code>no</code>.</li>
<li><strong><code>ghost-offset-x</code></strong> : The horizontal offset used to position the ghost effect.</li>
<li><strong><code>ghost-offset-y</code></strong> : The vertical offset used to position the ghost effect.</li>
<li><strong><code>ghost-opacity</code></strong> : The opacity of the ghost effect.</li>
</ul>
<h2 id="style/transition-animation">Transition animation <a href="#style/transition-animation"><span class="fa fa-bookmark"></span></a></h2>
<ul>
<li><strong><code>transition-property</code></strong> : A space-separated list of style properties to animate in this state.</li>
<li><strong><code>transition-duration</code></strong> : The length of the transition (e.g. <code>0.5s</code>).</li>
<li><strong><code>transition-delay</code></strong> : The length of the delay before the transition occurs (e.g. <code>250ms</code>).</li>
<li><strong><code>transition-timing-function</code></strong> : An easing function that controls the animation progress curve; may be one of the following values.  A <a href="http://easings.net/">visualisation</a> of easings serves as a reference.<ul>
<li><code>linear</code> (default),</li>
<li><code>spring( tension, friction )</code></li>
<li><code>cubic-bezier( x1, y1, x2, y2 )</code> (a <a href="http://cubic-bezier.com">demo</a> has details for parameter values),</li>
<li><code>ease</code>,</li>
<li><code>ease-in</code>,</li>
<li><code>ease-out</code>,</li>
<li><code>ease-in-out</code>,</li>
<li><code>ease-in-sine</code>,</li>
<li><code>ease-out-sine</code>,</li>
<li><code>ease-in-out-sine</code>,</li>
<li><code>ease-in-quad</code>,</li>
<li><code>ease-out-quad</code>,</li>
<li><code>ease-in-out-quad</code>,</li>
<li><code>ease-in-cubic</code>,</li>
<li><code>ease-out-cubic</code>,</li>
<li><code>ease-in-out-cubic</code>,</li>
<li><code>ease-in-quart</code>,</li>
<li><code>ease-out-quart</code>,</li>
<li><code>ease-in-out-quart</code>,</li>
<li><code>ease-in-quint</code>,</li>
<li><code>ease-out-quint</code>,</li>
<li><code>ease-in-out-quint</code>,</li>
<li><code>ease-in-expo</code>,</li>
<li><code>ease-out-expo</code>,</li>
<li><code>ease-in-out-expo</code>,</li>
<li><code>ease-in-circ</code>,</li>
<li><code>ease-out-circ</code>,</li>
<li><code>ease-in-out-circ</code>.</li>
</ul>
</li>
</ul>
<h2 id="style/core">Core <a href="#style/core"><span class="fa fa-bookmark"></span></a></h2>
<p>These properties affect UI global to the graph, and apply only to the core.  You can use the special <code>core</code> selector string to set these properties.</p>
<p>Indicator:</p>
<ul>
<li><strong><code>active-bg-color</code></strong> : The colour of the indicator shown when the background is grabbed by the user.</li>
<li><strong><code>active-bg-opacity</code></strong> : The opacity of the active background indicator.</li>
<li><strong><code>active-bg-size</code></strong> : The size of the active background indicator.</li>
</ul>
<p>Selection box:</p>
<ul>
<li><strong><code>selection-box-color</code></strong> : The background colour of the selection box used for drag selection.</li>
<li><strong><code>selection-box-border-color</code></strong> : The colour of the border on the selection box.</li>
<li><strong><code>selection-box-border-width</code></strong> : The size of the border on the selection box.</li>
<li><strong><code>selection-box-opacity</code></strong> : The opacity of the selection box.</li>
</ul>
<p>Texture during viewport gestures:</p>
<ul>
<li><strong><code>outside-texture-bg-color</code></strong> : The colour of the area outside the viewport texture when <code>initOptions.textureOnViewport === true</code>.</li>
<li><strong><code>outside-texture-bg-opacity</code></strong> : The opacity of the area outside the viewport texture.</li>
</ul>



				<h1 id="events">Events <a href="#events"><span class="fa fa-bookmark"></span></a></h1>

					<h2 id="events/event-object">Event object <a href="#events/event-object"><span class="fa fa-bookmark"></span></a></h2>
<p>Events passed to handler callbacks are similar to <a href="http://api.jquery.com/category/events/event-object/">jQuery event objects</a> and <a href="https://reactjs.org/docs/events.html">React synthetic events</a> in that they wrap native event objects, mimicking their API.</p>
<p>Fields:</p>
<ul>
<li><code>cy</code> : a reference to the corresponding core instance</li>
<li><code>target</code> : indicates the element or core that first caused the event</li>
<li><code>type</code> : the event type string (e.g. <code>&quot;tap&quot;</code>)</li>
<li><code>namespace</code> : the event namespace string (e.g. <code>&quot;foo&quot;</code> for <code>&quot;tap.foo&quot;</code>)</li>
<li><code>timeStamp</code> : Unix epoch time of event in milliseconds</li>
</ul>
<p>Fields for only user input device events:</p>
<ul>
<li><code>position</code> : indicates the model position of the event</li>
<li><code>renderedPosition</code> : indicates the rendered position of the event</li>
<li><code>originalEvent</code> : the original user input device event object</li>
</ul>
<p>Fields for only layout events:</p>
<ul>
<li><code>layout</code> : indicates the corresponding layout that triggered the event (useful if running multiple layouts simultaneously)</li>
</ul>
<h2 id="events/event-bubbling">Event bubbling <a href="#events/event-bubbling"><span class="fa fa-bookmark"></span></a></h2>
<p>All events that occur on elements get bubbled up to <a href="#notation/compound-nodes">compound parents</a> and then to the core.  You must take this into consideration when listening to the core so you can differentiate between events that happened on the background and ones that happened on elements.  Use the <code>eventObj.target</code> field, which indicates the originator of the event (i.e. <code>eventObj.target === cy || eventObj.target === someEle</code>).</p>
<h2 id="events/user-input-device-events">User input device events <a href="#events/user-input-device-events"><span class="fa fa-bookmark"></span></a></h2>
<p>These are normal browser events that you can listen to via Cytoscape.js.  You can listen to these events on the core and on collections.</p>
<ul>
<li><code>mousedown</code> : when the mouse button is pressed</li>
<li><code>mouseup</code> : when the mouse button is released</li>
<li><code>click</code> : after <code>mousedown</code> then <code>mouseup</code></li>
<li><code>mouseover</code> : when the cursor is put on top of the target</li>
<li><code>mouseout</code> : when the cursor is moved off of the target</li>
<li><code>mousemove</code> : when the cursor is moved somewhere on top of the target</li>
<li><code>touchstart</code> : when one or more fingers starts to touch the screen</li>
<li><code>touchmove</code> : when one or more fingers are moved on the screen</li>
<li><code>touchend</code> : when one or more fingers are removed from the screen</li>
</ul>
<p>There are also some higher level events that you can use so you don’t have to listen to different events for mouse-input devices and for touch devices.</p>
<ul>
<li><code>tapstart</code> or <code>vmousedown</code> : normalised tap start event (either <code>mousedown</code> or <code>touchstart</code>)</li>
<li><code>tapdrag</code> or <code>vmousemove</code> : normalised move event (either <code>touchmove</code> or <code>mousemove</code>)</li>
<li><code>tapdragover</code> : normalised over element event (either <code>touchmove</code> or <code>mousemove</code>/<code>mouseover</code>)</li>
<li><code>tapdragout</code> : normalised off of element event (either <code>touchmove</code> or <code>mousemove</code>/<code>mouseout</code>)</li>
<li><code>tapend</code> or <code>vmouseup</code> : normalised tap end event (either <code>mouseup</code> or <code>touchend</code>)</li>
<li><code>tap</code> or <code>vclick</code> : normalised tap event (either <code>click</code>, or <code>touchstart</code> followed by <code>touchend</code> without <code>touchmove</code>)</li>
<li><code>taphold</code> : normalised tap hold event</li>
<li><code>cxttapstart</code> : normalised right-click mousedown or two-finger <code>tapstart</code></li>
<li><code>cxttapend</code> : normalised right-click <code>mouseup</code> or two-finger <code>tapend</code></li>
<li><code>cxttap</code> : normalised right-click or two-finger <code>tap</code></li>
<li><code>cxtdrag</code> : normalised mousemove or two-finger drag after <code>cxttapstart</code> but before <code>cxttapend</code></li>
<li><code>cxtdragover</code> : when going over a node via <code>cxtdrag</code></li>
<li><code>cxtdragout</code> : when going off a node via <code>cxtdrag</code></li>
<li><code>boxstart</code> : when starting box selection</li>
<li><code>boxend</code> : when ending box selection</li>
<li><code>boxselect</code> : triggered on elements when selected by box selection</li>
<li><code>box</code> : triggered on elements when inside the box on <code>boxend</code></li>
</ul>
<h2 id="events/collection-events">Collection events <a href="#events/collection-events"><span class="fa fa-bookmark"></span></a></h2>
<p>These events are custom to Cytoscape.js.  You can listen to these events for collections.</p>
<ul>
<li><code>add</code> : when an element is added to the graph</li>
<li><code>remove</code> : when an element is removed from the graph</li>
<li><code>move</code> : when an element is moved w.r.t. topology<ul>
<li>nodes: when the compound <code>parent</code> is changed</li>
<li>edges: when the <code>source</code> or <code>target</code> is changed</li>
</ul>
</li>
<li><code>select</code> : when an element is selected</li>
<li><code>unselect</code> : when an element is unselected</li>
<li><code>tapselect</code> : when an element is selected by a tap gesture</li>
<li><code>tapunselect</code> : when an element is unselected by a tap elsewhere</li>
<li><code>boxselect</code> : triggered on elements when selected by box selection</li>
<li><code>box</code> : triggered on elements when inside the box on <code>boxend</code></li>
<li><code>lock</code> : when an element is locked</li>
<li><code>unlock</code> : when an element is unlocked</li>
<li><code>grabon</code> : when an element is grabbed directly (including only the one node directly under the cursor or the user’s finger)</li>
<li><code>grab</code> : when an element is grabbed (including all elements that would be dragged)</li>
<li><code>drag</code> : when an element is grabbed and then moved</li>
<li><code>free</code> : when an element is freed (i.e. let go from being grabbed)</li>
<li><code>freeon</code> : when an element is freed directly (including only the one node directly under the cursor or the user’s finger)</li>
<li><code>dragfree</code> : when an element is freed after being dragged (i.e. <code>grab</code> then <code>drag</code> then <code>free</code>)</li>
<li><code>dragfreeon</code> : when an element is freed after being dragged directly (i.e. <code>grabon</code>, <code>drag</code>, <code>freeon</code>)</li>
<li><code>position</code> : when an element changes position</li>
<li><code>data</code> : when an element’s data is changed</li>
<li><code>scratch</code> : when an element’s scratchpad data is changed</li>
<li><code>style</code> : when an element’s style is changed</li>
<li><code>background</code> : when a node’s background image is loaded</li>
</ul>
<h2 id="events/graph-events">Graph events <a href="#events/graph-events"><span class="fa fa-bookmark"></span></a></h2>
<p>These events are custom to Cytoscape.js, and they occur on the core.</p>
<ul>
<li><code>layoutstart</code> : when a layout starts running</li>
<li><code>layoutready</code> : when a layout has set initial positions for all the nodes (but perhaps not final positions)</li>
<li><code>layoutstop</code> : when a layout has finished running completely or otherwise stopped running</li>
<li><code>ready</code> : when a new instance of Cytoscape.js is ready to be interacted with</li>
<li><code>destroy</code> : when the instance of Cytoscape.js was explicitly destroyed by calling <code>.destroy()</code>.</li>
<li><code>render</code> : when the viewport is (re)rendered</li>
<li><code>pan</code> : when the viewport is panned</li>
<li><code>zoom</code> : when the viewport is zoomed</li>
<li><code>viewport</code> : when the viewport is changed (i.e. from a <code>pan</code>, a <code>zoom</code>, or from both when zooming about a point – e.g. pinch-to-zoom)</li>
<li><code>resize</code> : when the viewport is resized (usually by calling <code>cy.resize()</code>, a <code>window</code> resize, or toggling a class on the Cytoscape.js div)</li>
</ul>



				<h1 id="layouts">Layouts <a href="#layouts"><span class="fa fa-bookmark"></span></a></h1>

					<p>The function of a layout is to set the positions on the nodes in the graph.  Layouts are <a href="#extensions/layouts">extensions</a> of Cytoscape.js such that it is possible for anyone to write a layout without modifying the library itself.</p>
<p>Several layouts are included with Cytoscape.js by default, and their options are described in the sections that follow with the default values specified.  Note that you must set <code>options.name</code> to the name of the layout to specify which one you want to run.</p>
<p>Each layout has its own algorithm for setting the position for each node.  This algorithm influences the overall shape of the graph and the lengths of the edges.  A layout’s algorithm can be customised by setting its options.  Therefore, edge lengths can be controlled by setting the layout options appropriately.</p>
<p>For force-directed (physics) layouts, there is generally an option to set a weight to each edge to affect the relative edge lengths.  Edge length can also be affected by options like spacing factors, angles, and overlap avoidance.  Setting edge length depends on the particular layout, and some layouts will allow for more precise edge lengths than others.</p>
<p>A layout runs on the subgraph that you specify.  All elements in the graph are used for <a href="#cy.layout"><code>cy.layout()</code></a>.  The specified subset of elements is used for <a href="#eles.layout"><code>eles.layout()</code></a>.  In either case, the state of each element does not affect whether the element is considered in the layout.  For example, an <a href="#style/visibility">invisible node</a> is repositioned by a layout if the node is included in the layout’s set of elements.  You may use <code>eles.layout()</code> to address complex use-cases, like running a different layout on each component.</p>
<p>When running a headless instance, you may need to specify the <code>boundingBox</code> in order to indicate to the layout the area in which it can place nodes.  In a rendered instance, the bounds may be inferred by the size of the HTML DOM element <code>container</code>.</p>



					<h2 id="layouts/null">null <a href="#layouts/null"><span class="fa fa-bookmark"></span></a></h2>


						<p>The <code>null</code> layout puts all nodes at (0, 0).  It’s useful for debugging purposes.</p>


						<h3>Options</h3>
						<pre><code class="lang-js"><span class="hljs-keyword">let</span> options = {
  <span class="hljs-attr">name</span>: <span class="hljs-string">'null'</span>,

  <span class="hljs-attr">ready</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{}, <span class="hljs-comment">// on layoutready</span>
  stop: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{} <span class="hljs-comment">// on layoutstop</span>
};

cy.layout( options );</code></pre>
						<button class="run run-inline-code"><span class="fa fa-play"></span></button>


					<h2 id="layouts/random">random <a href="#layouts/random"><span class="fa fa-bookmark"></span></a></h2>


						<p>The <code>random</code> layout puts nodes in random positions within the viewport.</p>


						<h3>Options</h3>
						<pre><code class="lang-js"><span class="hljs-keyword">let</span> options = {
  <span class="hljs-attr">name</span>: <span class="hljs-string">'random'</span>,

  <span class="hljs-attr">fit</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// whether to fit to viewport</span>
  padding: <span class="hljs-number">30</span>, <span class="hljs-comment">// fit padding</span>
  boundingBox: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }</span>
  animate: <span class="hljs-literal">false</span>, <span class="hljs-comment">// whether to transition the node positions</span>
  animationDuration: <span class="hljs-number">500</span>, <span class="hljs-comment">// duration of animation in ms if enabled</span>
  animationEasing: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// easing of animation if enabled</span>
  animateFilter: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"> node, i </span>)</span>{ <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; }, <span class="hljs-comment">// a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts</span>
  ready: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback on layoutready</span>
  stop: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback on layoutstop</span>
  transform: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">node, position </span>)</span>{ <span class="hljs-keyword">return</span> position; } <span class="hljs-comment">// transform a given node position. Useful for changing flow direction in discrete layouts </span>
};

cy.layout( options );</code></pre>
						<button class="run run-inline-code"><span class="fa fa-play"></span></button>


					<h2 id="layouts/preset">preset <a href="#layouts/preset"><span class="fa fa-bookmark"></span></a></h2>


						<p>The <code>preset</code> layout puts nodes in the positions you specify manually.</p>


						<h3>Options</h3>
						<pre><code class="lang-js"><span class="hljs-keyword">let</span> options = {
  <span class="hljs-attr">name</span>: <span class="hljs-string">'preset'</span>,

  <span class="hljs-attr">positions</span>: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// map of (node id) =&gt; (position obj); or function(node){ return somPos; }</span>
  zoom: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// the zoom level to set (prob want fit = false if set)</span>
  pan: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// the pan level to set (prob want fit = false if set)</span>
  fit: <span class="hljs-literal">true</span>, <span class="hljs-comment">// whether to fit to viewport</span>
  padding: <span class="hljs-number">30</span>, <span class="hljs-comment">// padding on fit</span>
  animate: <span class="hljs-literal">false</span>, <span class="hljs-comment">// whether to transition the node positions</span>
  animationDuration: <span class="hljs-number">500</span>, <span class="hljs-comment">// duration of animation in ms if enabled</span>
  animationEasing: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// easing of animation if enabled</span>
  animateFilter: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"> node, i </span>)</span>{ <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; }, <span class="hljs-comment">// a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts</span>
  ready: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback on layoutready</span>
  stop: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback on layoutstop</span>
  transform: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">node, position </span>)</span>{ <span class="hljs-keyword">return</span> position; } <span class="hljs-comment">// transform a given node position. Useful for changing flow direction in discrete layouts</span>
};

cy.layout( options );</code></pre>
						<button class="run run-inline-code"><span class="fa fa-play"></span></button>


					<h2 id="layouts/grid">grid <a href="#layouts/grid"><span class="fa fa-bookmark"></span></a></h2>


						<p>The <code>grid</code> layout puts nodes in a well-spaced grid.</p>


						<h3>Options</h3>
						<pre><code class="lang-js"><span class="hljs-keyword">let</span> options = {
  <span class="hljs-attr">name</span>: <span class="hljs-string">'grid'</span>,

  <span class="hljs-attr">fit</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// whether to fit the viewport to the graph</span>
  padding: <span class="hljs-number">30</span>, <span class="hljs-comment">// padding used on fit</span>
  boundingBox: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }</span>
  avoidOverlap: <span class="hljs-literal">true</span>, <span class="hljs-comment">// prevents node overlap, may overflow boundingBox if not enough space</span>
  avoidOverlapPadding: <span class="hljs-number">10</span>, <span class="hljs-comment">// extra spacing around nodes when avoidOverlap: true</span>
  nodeDimensionsIncludeLabels: <span class="hljs-literal">false</span>, <span class="hljs-comment">// Excludes the label when calculating node bounding boxes for the layout algorithm</span>
  spacingFactor: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// Applies a multiplicative factor (&gt;0) to expand or compress the overall area that the nodes take up</span>
  condense: <span class="hljs-literal">false</span>, <span class="hljs-comment">// uses all available space on false, uses minimal space on true</span>
  rows: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// force num of rows in the grid</span>
  cols: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// force num of columns in the grid</span>
  position: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{}, <span class="hljs-comment">// returns { row, col } for element</span>
  sort: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') }</span>
  animate: <span class="hljs-literal">false</span>, <span class="hljs-comment">// whether to transition the node positions</span>
  animationDuration: <span class="hljs-number">500</span>, <span class="hljs-comment">// duration of animation in ms if enabled</span>
  animationEasing: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// easing of animation if enabled</span>
  animateFilter: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"> node, i </span>)</span>{ <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; }, <span class="hljs-comment">// a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts</span>
  ready: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback on layoutready</span>
  stop: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback on layoutstop</span>
  transform: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">node, position </span>)</span>{ <span class="hljs-keyword">return</span> position; } <span class="hljs-comment">// transform a given node position. Useful for changing flow direction in discrete layouts </span>
};

cy.layout( options );</code></pre>
						<button class="run run-inline-code"><span class="fa fa-play"></span></button>


					<h2 id="layouts/circle">circle <a href="#layouts/circle"><span class="fa fa-bookmark"></span></a></h2>


						<p>The <code>circle</code> layout puts nodes in a circle.</p>


						<h3>Options</h3>
						<pre><code class="lang-js"><span class="hljs-keyword">let</span> options = {
  <span class="hljs-attr">name</span>: <span class="hljs-string">'circle'</span>,

  <span class="hljs-attr">fit</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// whether to fit the viewport to the graph</span>
  padding: <span class="hljs-number">30</span>, <span class="hljs-comment">// the padding on fit</span>
  boundingBox: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }</span>
  avoidOverlap: <span class="hljs-literal">true</span>, <span class="hljs-comment">// prevents node overlap, may overflow boundingBox and radius if not enough space</span>
  nodeDimensionsIncludeLabels: <span class="hljs-literal">false</span>, <span class="hljs-comment">// Excludes the label when calculating node bounding boxes for the layout algorithm</span>
  spacingFactor: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// Applies a multiplicative factor (&gt;0) to expand or compress the overall area that the nodes take up</span>
  radius: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// the radius of the circle</span>
  startAngle: <span class="hljs-number">3</span> / <span class="hljs-number">2</span> * <span class="hljs-built_in">Math</span>.PI, <span class="hljs-comment">// where nodes start in radians</span>
  sweep: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// how many radians should be between the first and last node (defaults to full circle)</span>
  clockwise: <span class="hljs-literal">true</span>, <span class="hljs-comment">// whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false)</span>
  sort: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') }</span>
  animate: <span class="hljs-literal">false</span>, <span class="hljs-comment">// whether to transition the node positions</span>
  animationDuration: <span class="hljs-number">500</span>, <span class="hljs-comment">// duration of animation in ms if enabled</span>
  animationEasing: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// easing of animation if enabled</span>
  animateFilter: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"> node, i </span>)</span>{ <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; }, <span class="hljs-comment">// a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts</span>
  ready: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback on layoutready</span>
  stop: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback on layoutstop</span>
  transform: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">node, position </span>)</span>{ <span class="hljs-keyword">return</span> position; } <span class="hljs-comment">// transform a given node position. Useful for changing flow direction in discrete layouts </span>

};

cy.layout( options );</code></pre>
						<button class="run run-inline-code"><span class="fa fa-play"></span></button>


					<h2 id="layouts/concentric">concentric <a href="#layouts/concentric"><span class="fa fa-bookmark"></span></a></h2>


						<p>The <code>concentric</code> layout positions nodes in concentric circles, based on a metric that you specify to segregate the nodes into levels.  This layout sets the <code>concentric</code> value in <a href="#ele.scratch"><code>ele.scratch()</code></a>.</p>


						<h3>Options</h3>
						<pre><code class="lang-js"><span class="hljs-keyword">let</span> options = {
  <span class="hljs-attr">name</span>: <span class="hljs-string">'concentric'</span>,

  <span class="hljs-attr">fit</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// whether to fit the viewport to the graph</span>
  padding: <span class="hljs-number">30</span>, <span class="hljs-comment">// the padding on fit</span>
  startAngle: <span class="hljs-number">3</span> / <span class="hljs-number">2</span> * <span class="hljs-built_in">Math</span>.PI, <span class="hljs-comment">// where nodes start in radians</span>
  sweep: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// how many radians should be between the first and last node (defaults to full circle)</span>
  clockwise: <span class="hljs-literal">true</span>, <span class="hljs-comment">// whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false)</span>
  equidistant: <span class="hljs-literal">false</span>, <span class="hljs-comment">// whether levels have an equal radial distance betwen them, may cause bounding box overflow</span>
  minNodeSpacing: <span class="hljs-number">10</span>, <span class="hljs-comment">// min spacing between outside of nodes (used for radius adjustment)</span>
  boundingBox: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }</span>
  avoidOverlap: <span class="hljs-literal">true</span>, <span class="hljs-comment">// prevents node overlap, may overflow boundingBox if not enough space</span>
  nodeDimensionsIncludeLabels: <span class="hljs-literal">false</span>, <span class="hljs-comment">// Excludes the label when calculating node bounding boxes for the layout algorithm</span>
  height: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// height of layout area (overrides container height)</span>
  width: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// width of layout area (overrides container width)</span>
  spacingFactor: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// Applies a multiplicative factor (&gt;0) to expand or compress the overall area that the nodes take up</span>
  concentric: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-comment">// returns numeric value for each node, placing higher nodes in levels towards the centre</span>
  <span class="hljs-keyword">return</span> node.degree();
  },
  <span class="hljs-attr">levelWidth</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> nodes </span>)</span>{ <span class="hljs-comment">// the letiation of concentric values in each level</span>
  <span class="hljs-keyword">return</span> nodes.maxDegree() / <span class="hljs-number">4</span>;
  },
  <span class="hljs-attr">animate</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// whether to transition the node positions</span>
  animationDuration: <span class="hljs-number">500</span>, <span class="hljs-comment">// duration of animation in ms if enabled</span>
  animationEasing: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// easing of animation if enabled</span>
  animateFilter: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"> node, i </span>)</span>{ <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; }, <span class="hljs-comment">// a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts</span>
  ready: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback on layoutready</span>
  stop: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback on layoutstop</span>
  transform: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">node, position </span>)</span>{ <span class="hljs-keyword">return</span> position; } <span class="hljs-comment">// transform a given node position. Useful for changing flow direction in discrete layouts</span>
};

cy.layout( options );</code></pre>
						<button class="run run-inline-code"><span class="fa fa-play"></span></button>


					<h2 id="layouts/breadthfirst">breadthfirst <a href="#layouts/breadthfirst"><span class="fa fa-bookmark"></span></a></h2>


						<p>The <code>breadthfirst</code> layout puts nodes in a hierarchy, based on a breadthfirst traversal of the graph.  It is best suited to trees and forests in its default top-down mode, and it is best suited to DAGs in its circle mode.</p>


						<h3>Options</h3>
						<pre><code class="lang-js"><span class="hljs-keyword">let</span> options = {
  <span class="hljs-attr">name</span>: <span class="hljs-string">'breadthfirst'</span>,

  <span class="hljs-attr">fit</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// whether to fit the viewport to the graph</span>
  directed: <span class="hljs-literal">false</span>, <span class="hljs-comment">// whether the tree is directed downwards (or edges can point in any direction if false)</span>
  padding: <span class="hljs-number">30</span>, <span class="hljs-comment">// padding on fit</span>
  circle: <span class="hljs-literal">false</span>, <span class="hljs-comment">// put depths in concentric circles if true, put depths top down if false</span>
  grid: <span class="hljs-literal">false</span>, <span class="hljs-comment">// whether to create an even grid into which the DAG is placed (circle:false only)</span>
  spacingFactor: <span class="hljs-number">1.75</span>, <span class="hljs-comment">// positive spacing factor, larger =&gt; more space between nodes (N.B. n/a if causes overlap)</span>
  boundingBox: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }</span>
  avoidOverlap: <span class="hljs-literal">true</span>, <span class="hljs-comment">// prevents node overlap, may overflow boundingBox if not enough space</span>
  nodeDimensionsIncludeLabels: <span class="hljs-literal">false</span>, <span class="hljs-comment">// Excludes the label when calculating node bounding boxes for the layout algorithm</span>
  roots: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// the roots of the trees</span>
  maximal: <span class="hljs-literal">false</span>, <span class="hljs-comment">// whether to shift nodes down their natural BFS depths in order to avoid upwards edges (DAGS only)</span>
  animate: <span class="hljs-literal">false</span>, <span class="hljs-comment">// whether to transition the node positions</span>
  animationDuration: <span class="hljs-number">500</span>, <span class="hljs-comment">// duration of animation in ms if enabled</span>
  animationEasing: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// easing of animation if enabled,</span>
  animateFilter: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"> node, i </span>)</span>{ <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; }, <span class="hljs-comment">// a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts</span>
  ready: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback on layoutready</span>
  stop: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// callback on layoutstop</span>
  transform: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">node, position </span>)</span>{ <span class="hljs-keyword">return</span> position; } <span class="hljs-comment">// transform a given node position. Useful for changing flow direction in discrete layouts</span>
};

cy.layout( options );</code></pre>
						<button class="run run-inline-code"><span class="fa fa-play"></span></button>


					<h2 id="layouts/cose">cose <a href="#layouts/cose"><span class="fa fa-bookmark"></span></a></h2>


						<p>The <code>cose</code> (Compound Spring Embedder) layout uses a physics simulation to lay out graphs.  It works well with noncompound graphs and it has additional logic to support compound graphs well.</p>
<p>It was implemented by <a href="https://www.linkedin.com/in/gerardohuck">Gerardo Huck</a> as part of Google Summer of Code 2013 (Mentors: Max Franz, Christian Lopes, Anders Riutta, Ugur Dogrusoz).</p>
<p>Based on the article <a href="http://dl.acm.org/citation.cfm?id=1498047&amp;CFID=429377863&amp;CFTOKEN=94691144">“A layout algorithm for undirected compound graphs”</a> by Ugur Dogrusoz, Erhan Giral, Ahmet Cetintas, Ali Civril and Emek Demir.</p>
<p>The <code>cose</code> layout is very fast and produces good results.  The <a href="https://github.com/cytoscape/cytoscape.js-cose-bilkent"><code>cose-bilkent</code></a> extension is an evolution of the algorithm that is more computationally expensive but produces near-perfect results.</p>


						<h3>Options</h3>
						<pre><code class="lang-js"><span class="hljs-keyword">let</span> options = {
  <span class="hljs-attr">name</span>: <span class="hljs-string">'cose'</span>,

  <span class="hljs-comment">// Called on `layoutready`</span>
  ready: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{},

  <span class="hljs-comment">// Called on `layoutstop`</span>
  stop: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{},

  <span class="hljs-comment">// Whether to animate while running the layout</span>
  <span class="hljs-comment">// true : Animate continuously as the layout is running</span>
  <span class="hljs-comment">// false : Just show the end result</span>
  <span class="hljs-comment">// 'end' : Animate with the end result, from the initial positions to the end positions</span>
  animate: <span class="hljs-literal">true</span>,

  <span class="hljs-comment">// Easing of the animation for animate:'end'</span>
  animationEasing: <span class="hljs-literal">undefined</span>,

  <span class="hljs-comment">// The duration of the animation for animate:'end'</span>
  animationDuration: <span class="hljs-literal">undefined</span>,

  <span class="hljs-comment">// A function that determines whether the node should be animated</span>
  <span class="hljs-comment">// All nodes animated by default on animate enabled</span>
  <span class="hljs-comment">// Non-animated nodes are positioned immediately when the layout starts</span>
  animateFilter: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"> node, i </span>)</span>{ <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; },


  <span class="hljs-comment">// The layout animates only after this many milliseconds for animate:true</span>
  <span class="hljs-comment">// (prevents flashing on fast runs)</span>
  animationThreshold: <span class="hljs-number">250</span>,

  <span class="hljs-comment">// Number of iterations between consecutive screen positions update</span>
  refresh: <span class="hljs-number">20</span>,

  <span class="hljs-comment">// Whether to fit the network view after when done</span>
  fit: <span class="hljs-literal">true</span>,

  <span class="hljs-comment">// Padding on fit</span>
  padding: <span class="hljs-number">30</span>,

  <span class="hljs-comment">// Constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }</span>
  boundingBox: <span class="hljs-literal">undefined</span>,

  <span class="hljs-comment">// Excludes the label when calculating node bounding boxes for the layout algorithm</span>
  nodeDimensionsIncludeLabels: <span class="hljs-literal">false</span>,

  <span class="hljs-comment">// Randomize the initial positions of the nodes (true) or use existing positions (false)</span>
  randomize: <span class="hljs-literal">false</span>,

  <span class="hljs-comment">// Extra spacing between components in non-compound graphs</span>
  componentSpacing: <span class="hljs-number">40</span>,

  <span class="hljs-comment">// Node repulsion (non overlapping) multiplier</span>
  nodeRepulsion: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> node </span>)</span>{ <span class="hljs-keyword">return</span> <span class="hljs-number">2048</span>; },

  <span class="hljs-comment">// Node repulsion (overlapping) multiplier</span>
  nodeOverlap: <span class="hljs-number">4</span>,

  <span class="hljs-comment">// Ideal edge (non nested) length</span>
  idealEdgeLength: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> edge </span>)</span>{ <span class="hljs-keyword">return</span> <span class="hljs-number">32</span>; },

  <span class="hljs-comment">// Divisor to compute edge forces</span>
  edgeElasticity: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> edge </span>)</span>{ <span class="hljs-keyword">return</span> <span class="hljs-number">32</span>; },

  <span class="hljs-comment">// Nesting factor (multiplier) to compute ideal edge length for nested edges</span>
  nestingFactor: <span class="hljs-number">1.2</span>,

  <span class="hljs-comment">// Gravity force (constant)</span>
  gravity: <span class="hljs-number">1</span>,

  <span class="hljs-comment">// Maximum number of iterations to perform</span>
  numIter: <span class="hljs-number">1000</span>,

  <span class="hljs-comment">// Initial temperature (maximum node displacement)</span>
  initialTemp: <span class="hljs-number">1000</span>,

  <span class="hljs-comment">// Cooling factor (how the temperature is reduced between consecutive iterations</span>
  coolingFactor: <span class="hljs-number">0.99</span>,

  <span class="hljs-comment">// Lower temperature threshold (below this point the layout will end)</span>
  minTemp: <span class="hljs-number">1.0</span>
};

cy.layout( options );</code></pre>
						<button class="run run-inline-code"><span class="fa fa-play"></span></button>


					<h2 id="layouts/layout-manipulation">Layout manipulation <a href="#layouts/layout-manipulation"><span class="fa fa-bookmark"></span></a></h2>


						<p>Layouts have a set of functions available to them, which allow for more complex behaviour than the primary run-one-layout-at-a-time usecase.  A new, developer accessible layout can be made via <a href="#core/visuals/cy.layout"><code>cy.layout()</code></a>.</p>



						<div class="function">
							<div class="name" id="layout.run">
								<span class="fn-name">layout.run()</span>  <a href="#layout.run"><span class="fa fa-bookmark"></span></a>
								<span id="layouts/layout-manipulation/layout.run">&nbsp;</span><span id="layouts/layout-manipulation/layout.start">&nbsp;</span><span id="layout.start">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="layouts/layout-manipulation/layout.start" class="pure-alias-name">layout.start()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Start running the layout.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>If the layout is asynchronous (i.e. continuous), then calling <code>layout.run()</code> simply starts the layout.  Synchronous (i.e. discrete) layouts finish before <code>layout.run()</code> returns.  Whenever the layout is started, the <code>layoutstart</code> event is emitted.</p>
<p>The layout will emit the <code>layoutstop</code> event when it has finished or has been otherwise stopped (e.g. by calling <code>layout.stop()</code>).  The developer can listen to <code>layoutstop</code> using <a href="#layouts/layout-events/layout.on"><code>layout.on()</code></a> or setting the layout options appropriately with a callback.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> layout = cy.layout({ <span class="hljs-attr">name</span>: <span class="hljs-string">'random'</span> });

layout.run();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="layout.stop">
								<span class="fn-name">layout.stop()</span>  <a href="#layout.stop"><span class="fa fa-bookmark"></span></a>
								<span id="layouts/layout-manipulation/layout.stop">&nbsp;</span>
							</div>



							<div class="descr"><p>Stop running the (asynchronous/discrete) layout.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>Calling <code>layout.stop()</code> stops an asynchronous (continuous) layout.  It’s useful if you want to prematurely stop a running layout.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> layout = cy.layout({ <span class="hljs-attr">name</span>: <span class="hljs-string">'cose'</span> });

layout.run();

<span class="hljs-comment">// some time later...</span>
setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  layout.stop();
}, <span class="hljs-number">100</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

					<h2 id="layouts/layout-events">Layout events <a href="#layouts/layout-events"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="layout.on">
								<span class="fn-name">layout.on()</span>  <a href="#layout.on"><span class="fa fa-bookmark"></span></a>
								<span id="layouts/layout-events/layout.on">&nbsp;</span><span id="layouts/layout-events/layout.bind">&nbsp;</span><span id="layout.bind">&nbsp;</span><span id="layouts/layout-events/layout.listen">&nbsp;</span><span id="layout.listen">&nbsp;</span><span id="layouts/layout-events/layout.addListener">&nbsp;</span><span id="layout.addListener">&nbsp;</span><span id="layouts/layout-events/layout.on">&nbsp;</span><span id="layout.on">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="layouts/layout-events/layout.bind" class="pure-alias-name">layout.bind()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="layouts/layout-events/layout.listen" class="pure-alias-name">layout.listen()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="layouts/layout-events/layout.addListener" class="pure-alias-name">layout.addListener()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Listen to events that are emitted by the layout.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">layout.on( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>data]<span class="comma">,&nbsp;</span>function(event)</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A space separated list of event names.</p>
</span>

												</li>
												<li>
													<span class="name">data</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A plain object which is passed to the handler in the event object argument.</p>
</span>

												</li>
												<li>
													<span class="name">function(event)</span>
													
													<span class="descr"><p>The handler function that is called when one of the specified events occurs.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#events">event</a></span>
																
																<span class="descr"><p>The event object.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="layout.promiseOn">
								<span class="fn-name">layout.promiseOn()</span>  <a href="#layout.promiseOn"><span class="fa fa-bookmark"></span></a>
								<span id="layouts/layout-events/layout.promiseOn">&nbsp;</span><span id="layouts/layout-events/layout.pon">&nbsp;</span><span id="layout.pon">&nbsp;</span><span id="layouts/layout-events/layout.promiseOn">&nbsp;</span><span id="layout.promiseOn">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="layouts/layout-events/layout.pon" class="pure-alias-name">layout.pon()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get a promise that is resolved when the layout emits the first of any of the specified events.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">layout.promiseOn( <span class="args-summary"><span class="comma">,&nbsp;</span>events</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A space separated list of event names.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> layout = cy.layout({ <span class="hljs-attr">name</span>: <span class="hljs-string">'random'</span> });

layout.pon(<span class="hljs-string">'layoutstop'</span>).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> event </span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'layoutstop promise fulfilled'</span>);
});

layout.run();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="layout.one">
								<span class="fn-name">layout.one()</span>  <a href="#layout.one"><span class="fa fa-bookmark"></span></a>
								<span id="layouts/layout-events/layout.one">&nbsp;</span><span id="layouts/layout-events/layout.one">&nbsp;</span><span id="layout.one">&nbsp;</span>
							</div>



							<div class="descr"><p>Listen to events that are emitted by the layout, and run the handler only once.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">layout.one( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>data]<span class="comma">,&nbsp;</span>function(event)</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A space separated list of event names.</p>
</span>

												</li>
												<li>
													<span class="name">data</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A plain object which is passed to the handler in the event object argument.</p>
</span>

												</li>
												<li>
													<span class="name">function(event)</span>
													
													<span class="descr"><p>The handler function that is called when one of the specified events occurs.</p>
</span>

													<ul class="fields">
															<li>
																<span class="name"><a href="#events">event</a></span>
																
																<span class="descr"><p>The event object.</p>
</span>
															</li>

													</ul>
												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="layout.removeListener">
								<span class="fn-name">layout.removeListener()</span>  <a href="#layout.removeListener"><span class="fa fa-bookmark"></span></a>
								<span id="layouts/layout-events/layout.removeListener">&nbsp;</span><span id="layouts/layout-events/layout.off">&nbsp;</span><span id="layout.off">&nbsp;</span><span id="layouts/layout-events/layout.unbind">&nbsp;</span><span id="layout.unbind">&nbsp;</span><span id="layouts/layout-events/layout.unlisten">&nbsp;</span><span id="layout.unlisten">&nbsp;</span><span id="layouts/layout-events/layout.removeListener">&nbsp;</span><span id="layout.removeListener">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="layouts/layout-events/layout.off" class="pure-alias-name">layout.off()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="layouts/layout-events/layout.unbind" class="pure-alias-name">layout.unbind()</code><span class="pure-alias-comma">,</span>
									</span>
									<span class="pure-alias">
										<code id="layouts/layout-events/layout.unlisten" class="pure-alias-name">layout.unlisten()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Remove event handlers on the layout.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">layout.removeListener( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>handler]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A space separated list of event names.</p>
</span>

												</li>
												<li>
													<span class="name">handler</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>A reference to the handler function to remove.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="layout.removeAllListeners">
								<span class="fn-name">layout.removeAllListeners()</span>  <a href="#layout.removeAllListeners"><span class="fa fa-bookmark"></span></a>
								<span id="layouts/layout-events/layout.removeAllListeners">&nbsp;</span>
							</div>



							<div class="descr"><p>Remove all event handlers on the layout.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="layout.emit">
								<span class="fn-name">layout.emit()</span>  <a href="#layout.emit"><span class="fa fa-bookmark"></span></a>
								<span id="layouts/layout-events/layout.emit">&nbsp;</span><span id="layouts/layout-events/layout.trigger">&nbsp;</span><span id="layout.trigger">&nbsp;</span><span id="layouts/layout-events/layout.emit">&nbsp;</span><span id="layout.emit">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="layouts/layout-events/layout.trigger" class="pure-alias-name">layout.trigger()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Emit one or more events on the layout.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">layout.emit( <span class="args-summary"><span class="comma">,&nbsp;</span>events [<span class="comma">,&nbsp;</span>extraParams]</span> )</div>


										<div class="descr"></div>
										<ul class="args">
												<li>
													<span class="name"><a href="#events">events</a></span>
													
													<span class="descr"><p>A list of event names to emit (either a space-separated string or an array).</p>
</span>

												</li>
												<li>
													<span class="name">extraParams</span>
													<span class="optional">[optional]</span>
													<span class="descr"><p>An array of additional parameters to pass to the handler.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
							</div>
						</div>

				<h1 id="animations">Animations <a href="#animations"><span class="fa fa-bookmark"></span></a></h1>

					<p>An animation represents a visible change in state over a duration of time for a single element.  Animations can be generated via <a href="#cy.animation"><code>cy.animation()</code></a> (for animations on the viewport) and <a href="#ele.animation"><code>ele.animation()</code></a> (for animations on graph elements).</p>



					<h2 id="animations/animation-manipulation">Animation manipulation <a href="#animations/animation-manipulation"><span class="fa fa-bookmark"></span></a></h2>




						<div class="function">
							<div class="name" id="ani.play">
								<span class="fn-name">ani.play()</span>  <a href="#ani.play"><span class="fa fa-bookmark"></span></a>
								<span id="animations/animation-manipulation/ani.play">&nbsp;</span><span id="animations/animation-manipulation/ani.run">&nbsp;</span><span id="ani.run">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="animations/animation-manipulation/ani.run" class="pure-alias-name">ani.run()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Requests that the animation be played, starting on the next frame.  If the animation is complete, it restarts from the beginning.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> jAni = cy.$(<span class="hljs-string">'#j'</span>).animation({
  <span class="hljs-attr">style</span>: {
    <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'red'</span>,
    <span class="hljs-string">'width'</span>: <span class="hljs-number">75</span>
  },
  <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>
});

jAni.play();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ani.playing">
								<span class="fn-name">ani.playing()</span>  <a href="#ani.playing"><span class="fa fa-bookmark"></span></a>
								<span id="animations/animation-manipulation/ani.playing">&nbsp;</span><span id="animations/animation-manipulation/ani.running">&nbsp;</span><span id="ani.running">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="animations/animation-manipulation/ani.running" class="pure-alias-name">ani.running()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get whether the animation is currently playing.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="ani.progress">
								<span class="fn-name">ani.progress()</span> et al <a href="#ani.progress"><span class="fa fa-bookmark"></span></a>
								<span id="animations/animation-manipulation/ani.progress">&nbsp;</span><span id="animations/animation-manipulation/ani.progress">&nbsp;</span><span id="ani.progress">&nbsp;</span><span id="animations/animation-manipulation/ani.progress">&nbsp;</span><span id="ani.progress">&nbsp;</span><span id="animations/animation-manipulation/ani.time">&nbsp;</span><span id="ani.time">&nbsp;</span><span id="animations/animation-manipulation/ani.time">&nbsp;</span><span id="ani.time">&nbsp;</span><span id="animations/animation-manipulation/ani.rewind">&nbsp;</span><span id="ani.rewind">&nbsp;</span><span id="animations/animation-manipulation/ani.fastforward">&nbsp;</span><span id="ani.fastforward">&nbsp;</span>
							</div>



							<div class="descr"><p>Get or set how far along the animation has progressed.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ani.progress()</div>


										<div class="descr"><p>Get the progress of the animation in percent.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ani.progress( <span class="args-summary"><span class="comma">,&nbsp;</span>progress</span> )</div>


										<div class="descr"><p>Set the progress of the animation in percent.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">progress</span>
													
													<span class="descr"><p>The progress in percent (i.e. between 0 and 1 inclusive) to set to the animation.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">ani.time()</div>


										<div class="descr"><p>Get the progress of the animation in milliseconds.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ani.time( <span class="args-summary"><span class="comma">,&nbsp;</span>time</span> )</div>


										<div class="descr"><p>Set the progress of the animation in milliseconds.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">time</span>
													
													<span class="descr"><p>The progress in milliseconds (i.e. between 0 and the duration inclusive) to set to the animation.</p>
</span>

												</li>
										</ul>
									</div>
									<div class="format">
											<div class="name">ani.rewind()</div>


										<div class="descr"><p>Rewind the animation to the beginning.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ani.fastforward()</div>


										<div class="descr"><p>Fastforward the animation to the end.</p>
</div>
										<ul class="args">
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> jAni = cy.$(<span class="hljs-string">'#j'</span>).animation({
  <span class="hljs-attr">style</span>: {
    <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'red'</span>,
    <span class="hljs-string">'width'</span>: <span class="hljs-number">75</span>
  },
  <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>
});

<span class="hljs-comment">// set animation to 50% and then play</span>
jAni.progress(<span class="hljs-number">0.5</span>).play();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ani.pause">
								<span class="fn-name">ani.pause()</span>  <a href="#ani.pause"><span class="fa fa-bookmark"></span></a>
								<span id="animations/animation-manipulation/ani.pause">&nbsp;</span>
							</div>



							<div class="descr"><p>Pause the animation, maintaining the current progress.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);
<span class="hljs-keyword">var</span> jAni = j.animation({
  <span class="hljs-attr">style</span>: {
    <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'red'</span>,
    <span class="hljs-string">'width'</span>: <span class="hljs-number">75</span>
  },
  <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>
});

jAni.play();

<span class="hljs-comment">// pause about midway</span>
setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  jAni.pause();
}, <span class="hljs-number">500</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ani.stop">
								<span class="fn-name">ani.stop()</span>  <a href="#ani.stop"><span class="fa fa-bookmark"></span></a>
								<span id="animations/animation-manipulation/ani.stop">&nbsp;</span>
							</div>



							<div class="descr"><p>Stop the animation, maintaining the current progress and removing the animation from any associated queues.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>This function is useful in situations where you don’t want to run an animation any more.  Calling <code>ani.stop()</code> is analogous to calling <code>ele.stop()</code> in that the animation is no longer queued.  </p>
<p>Calling <code>ani.stop()</code> makes animation frames faster by reducing the number of animations to check per element per frame.  You should call <code>ani.stop()</code> when you want to clean up an animation, especially in situations with many animations.  You can still reuse a stopped animation, but an animation that has not been stopped can not be garbage collected unless its associated target (i.e. element or core instance) is garbage collected as well.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> j = cy.$(<span class="hljs-string">'#j'</span>);
<span class="hljs-keyword">var</span> jAni = j.animation({
  <span class="hljs-attr">style</span>: {
    <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'red'</span>,
    <span class="hljs-string">'width'</span>: <span class="hljs-number">75</span>
  },
  <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>
});

jAni.play();

<span class="hljs-comment">// stop about midway</span>
setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  jAni.stop();
}, <span class="hljs-number">500</span>);</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ani.completed">
								<span class="fn-name">ani.completed()</span>  <a href="#ani.completed"><span class="fa fa-bookmark"></span></a>
								<span id="animations/animation-manipulation/ani.completed">&nbsp;</span><span id="animations/animation-manipulation/ani.complete">&nbsp;</span><span id="ani.complete">&nbsp;</span>
							</div>


							<div class="pure-aliases">
								<span class="important-indicator"></span> Aliases:

									<span class="pure-alias">
										<code id="animations/animation-manipulation/ani.complete" class="pure-alias-name">ani.complete()</code><span class="pure-alias-comma">,</span>
									</span>
							</div>

							<div class="descr"><p>Get whether the animation has progressed to the end.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="ani.apply">
								<span class="fn-name">ani.apply()</span>  <a href="#ani.apply"><span class="fa fa-bookmark"></span></a>
								<span id="animations/animation-manipulation/ani.apply">&nbsp;</span>
							</div>



							<div class="descr"><p>Apply the animation at its current progress.</p>
</div>


							<div class="details">
									<h3 id="details">Details</h3>
<p>This function allows you to step directly to a particular progress of the animation while it’s paused.</p>
<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> jAni = cy.$(<span class="hljs-string">'#j'</span>).animation({
  <span class="hljs-attr">style</span>: {
    <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'red'</span>,
    <span class="hljs-string">'width'</span>: <span class="hljs-number">75</span>
  },
  <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>
});

jAni.progress(<span class="hljs-number">0.5</span>).apply();</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ani.applying">
								<span class="fn-name">ani.applying()</span>  <a href="#ani.applying"><span class="fa fa-bookmark"></span></a>
								<span id="animations/animation-manipulation/ani.applying">&nbsp;</span>
							</div>



							<div class="descr"><p>Get whether the animation is currently applying.</p>
</div>


							<div class="details">
							</div>
						</div>
						<div class="function">
							<div class="name" id="ani.reverse">
								<span class="fn-name">ani.reverse()</span>  <a href="#ani.reverse"><span class="fa fa-bookmark"></span></a>
								<span id="animations/animation-manipulation/ani.reverse">&nbsp;</span>
							</div>



							<div class="descr"><p>Reverse the animation such that its starting conditions and ending conditions are reversed.</p>
</div>


							<div class="details">
									<h3 id="examples">Examples</h3>
<pre><code class="language-js"><span class="hljs-keyword">var</span> jAni = cy.$(<span class="hljs-string">'#j'</span>).animation({
  <span class="hljs-attr">style</span>: {
    <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'red'</span>,
    <span class="hljs-string">'width'</span>: <span class="hljs-number">75</span>
  },
  <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>
});

jAni
  .play() <span class="hljs-comment">// start</span>
  .promise(<span class="hljs-string">'completed'</span>).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">// on next completed</span>
    jAni
      .reverse() <span class="hljs-comment">// switch animation direction</span>
      .rewind() <span class="hljs-comment">// optional but makes intent clear</span>
      .play() <span class="hljs-comment">// start again</span>
    ;
  })
;</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>
						<div class="function">
							<div class="name" id="ani.promise">
								<span class="fn-name">ani.promise()</span>  <a href="#ani.promise"><span class="fa fa-bookmark"></span></a>
								<span id="animations/animation-manipulation/ani.promise">&nbsp;</span><span id="animations/animation-manipulation/ani.promise">&nbsp;</span><span id="ani.promise">&nbsp;</span><span id="animations/animation-manipulation/ani.promise">&nbsp;</span><span id="ani.promise">&nbsp;</span>
							</div>



							<div class="descr"><p>Get a promise that is fulfilled with the specified animation event.</p>
</div>

							<div class="formats">
									<div class="format">
											<div class="name">ani.promise()</div>


										<div class="descr"><p>Get a promise that is fulfilled with the next <code>completed</code> event.</p>
</div>
										<ul class="args">
										</ul>
									</div>
									<div class="format">
											<div class="name">ani.promise( <span class="args-summary"><span class="comma">,&nbsp;</span>animationEvent</span> )</div>


										<div class="descr"><p>Get a promise that is fulfilled with the specified animation event.</p>
</div>
										<ul class="args">
												<li>
													<span class="name">animationEvent</span>
													
													<span class="descr"><p>A string for the event name; <code>completed</code> or <code>complete</code> for completing the animation or <code>frame</code> for the next frame of the animation.</p>
</span>

												</li>
										</ul>
									</div>
							</div>

							<div class="details">
									<h3 id="examples">Examples</h3>
<p>When <code>ani.apply()</code> has updated the element style:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> jAni = cy.$(<span class="hljs-string">'#j'</span>).animation({
  <span class="hljs-attr">style</span>: {
    <span class="hljs-string">'background-color'</span>: <span class="hljs-string">'red'</span>,
    <span class="hljs-string">'width'</span>: <span class="hljs-number">75</span>
  },
  <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>
});

jAni.progress(<span class="hljs-number">0.5</span>).apply().promise(<span class="hljs-string">'frame'</span>).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'j has now has its style at 50% of the animation'</span>);
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>When <code>ani.play()</code> is done:</p>
<pre><code class="language-js"><span class="hljs-keyword">var</span> jAni = cy.$(<span class="hljs-string">'#j'</span>).animation({
  <span class="hljs-attr">style</span>: {
    <span class="hljs-attr">height</span>: <span class="hljs-number">60</span>
  },
  <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>
});

jAni.play().promise().then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'animation done'</span>);
});</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button>
							</div>
						</div>

				<h1 id="extensions">Extensions <a href="#extensions"><span class="fa fa-bookmark"></span></a></h1>

					<p>You can use an extension (e.g. <code>cy-ext</code>) as follows with <code>cytoscape.use()</code>:</p>
<pre><code class="language-js">cytoscape.use( <span class="hljs-built_in">require</span>(<span class="hljs-string">'cy-ext'</span>) );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>Using <code>import</code>, the above example would be:</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> ext <span class="hljs-keyword">from</span> <span class="hljs-string">'cy-ext'</span>;

cytoscape.use( ext );</code></pre>
<button class="run run-inline-code"><span class="fa fa-play"></span></button><p>The extensions below are a curated list.  To add your extension, <a href="https://github.com/cytoscape/cytoscape.js/issues/new?labels=documentation&amp;title=List%20extension%20:%20%3Cyour%20extension%20name%3E&amp;body=Please%20enter%20your%20Github%20URL%20and%20a%20one-line%20description">please submit a request</a> that includes your extension’s URL and a one line description.</p>
<p><i class="fa fa-fw fa-user"></i> denotes a first-party extension, one that is maintained by groups associated with the Cytoscape Consortium.</p>
<p><i class="fa fa-fw fa-users"></i> denotes a third-party extension, one that is maintained by outside developers.</p>
<h2 id="extensions/ui-extensions">UI extensions <a href="#extensions/ui-extensions"><span class="fa fa-bookmark"></span></a></h2>
<ul>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/lambdalisue/cytoscape-anywhere-panning"><code>anywhere-panning</code></a> : Allow panning when dragging on nodes or edges.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-automove"><code>automove</code></a> : Automatically update node positions based on specified rules (e.g. synching node movements, constraining movements, etc.)</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-autopan-on-drag"><code>autopan-on-drag</code></a> : Automatically pan the viewport when nodes are dragged outside of the viewport bounds.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/classcraft/cytoscape.js-canvas"><code>canvas</code></a> : An extension to create a canvas over or under a Cytoscape graph. Useful for customizing nodes/edges, drawing backgrounds, etc.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/silviafrias/cerebral-web"><code>cerebralweb</code></a> : Enable fast and interactive visualisation of molecular interaction networks stratified based on subcellular localisation or other custom annotation.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-compound-drag-and-drop"><code>compound-drag-and-drop</code></a> : Compound node drag-and-drop UI for adding and removing children</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus"><code>context-menus</code></a> : A traditional right click menu</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-cxtmenu"><code>cxtmenu</code></a> : A circular context menu that allows for one-swipe commands on the graph.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-edge-bend-editing"><code>edge-bend-editing</code></a> : UI for editing edge bends (segment edges and bezier edges)</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/frankiex/cytoscape.js-edge-editation"><code>edge-editation</code></a> : Adds handles to nodes and allows creation of different types of edges</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/jri/cytoscape-edge-connections"><code>edge-connections</code></a> : Allows edges to visually connect other edges, according to the Associative Model of Data.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-edgehandles"><code>edgehandles</code></a> : UI for connecting nodes with edges.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/mo0om/cytoscape-even-parent"><code>even-parent</code></a> : Layout which resizes children to fit under parent no matter how many there are.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-expand-collapse"><code>expand-collapse</code></a> : Provides an API for expanding and collapsing compound parent nodes</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-grid-guide"><code>grid-guide</code></a> : Adds grid and snapping functionality to Cytoscape graphs</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-navigator"><code>navigator</code></a> : A bird’s eye view widget of the graph.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://mo0om.github.io/cytoscape-no-overlap"><code>no-overlap</code></a> : Prevents nodes from overlapping on drag.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/kaluginserg/cytoscape-node-html-label"><code>node-html-label</code></a> : Allows HTML to be specified as the labels for nodes.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-node-resize"><code>node-resize</code></a> : A highly customisable node resizing extension with a traditional UI.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/curupaco/cytoscape.js-noderesize"><code>noderesize</code></a> : A minimalistic node resize control.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-panzoom"><code>panzoom</code></a> : A panzoom UI widget.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-popper"><code>popper</code></a> : A wrapper for <a href="https://popper.js.org/">Popper.js</a> that lets you position divs relative to Cytoscape elements (can be used with <a href="https://atomiks.github.io/tippyjs/">Tippy.js</a> to create tooltips).</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-qtip"><code>qtip</code></a> : A wrapper that lets you use qTips on graph elements or the graph background.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/guimeira/cytoscape-snap-to-grid"><code>snap-to-grid</code></a> : Adds snap-to-grid and gridlines to Cytoscape.js graphs.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/jhonatandarosa/cytoscape.js-supportimages"><code>supportimages</code></a> : Support images on Cytoscape.js.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/bdparrish/cytoscape.js-toolbar"><code>toolbar</code></a> : Allow a user to create a custom toolbar to add next to a Cytoscape core instance.</li>
</ul>
<h2 id="extensions/layout-extensions">Layout extensions <a href="#extensions/layout-extensions"><span class="fa fa-bookmark"></span></a></h2>
<ul>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-cola"><code>cola</code></a> : The Cola.js physics simulation (force-directed) layout.  Cola makes beautiful layout results, it animates very smoothly, and it has great options for controlling the layout.  It is focussed on giving aesthetically pleasing results for relatively small graphs.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-avsdf"><code>avsdf</code></a> : The AVSDF layout.  It organises nodes in a circle and tries to minimise edge crossings as much as possible.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-cise"><code>cise</code></a> : The CiSE layout creates circular clusters and uses a physics simulation (force-directed algorithm) to create distance between the clusters.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-cose-bilkent"><code>cose-bilkent</code></a> : The CoSE layout by Bilkent with enhanced compound node placement.  CoSE Bilkent is a physics simulation (force-directed) layout that gives near-perfect end results.  However, it’s more expensive than both <code>cose</code> and <code>fcose</code>.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/shichuanpo/cytoscape.js-d3-force"><code>d3-force</code></a> : The D3 force layout.  It uses a basic physics simulation (force-directed) algorithm that generates good results for small, simple graphs.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-dagre"><code>dagre</code></a> : The Dagre layout for DAGs and trees.  It organises the graph in a hierarchy.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-elk"><code>elk</code></a> : <a href="https://github.com/OpenKieler/elkjs">ELK</a> layout algorithm adapter for Cytoscape.js.  It contains several layout algorithms.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-euler"><code>euler</code></a> : Euler is a fast, small file-size, high-quality force-directed (physics simulation) layout.  It is good for non-compound graphs, and it has basic support for compound graphs.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-fcose"><code>fcose</code></a> : The fCoSE layout is a faster version of the CoSE-Bilkent layout.  It supports compound and non-compound graphs, giving top-tier end results and high performance for a force-directed layout.  If you want to use a force-directed layout, fCoSE should be the first layout you try.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-klay"><code>klay</code></a> : Klay is a layout that works well for most types of graphs.  It gives good results for ordinary graphs, and it handles DAGs and compound graphs very nicely.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/Nickolasmv/cytoscape-ngraph.forcelayout"><code>ngraph.forcelayout</code></a> : A physics simulation layout that works particularly well on planar graphs.  It is relatively fast.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/monprin/polywas"><code>polywas</code></a> : A layout for GWAS (genome-wide association study) data illustrating inter-locus relationships.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-spread"><code>spread</code></a> : The Spread physics simulation (force-directed) layout tries to use all the viewport space, but it can be configured to produce a tighter result.  It uses the CoSE algorithm initially, and it uses Gansner and North for the spread phase.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytoscape.js-springy"><code>springy</code></a> : The Springy physics simulation layout.  It’s a basic physics (force-directed) layout.</li>
</ul>
<h2 id="extensions/api-extensions">API extensions <a href="#extensions/api-extensions"><span class="fa fa-bookmark"></span></a></h2>
<ul>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/daniel-dx/cytoscape-all-paths"><code>all-paths</code></a> : Gets all longest, directed paths.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-clipboard"><code>clipboard</code></a> : Adds copy-paste utilities to Cytoscape.js.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/lambdalisue/cytoscape-dblclick"><code>dblclick</code></a> : Adds a <code>dblclick</code> event to Cytoscape.js.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-graphml"><code>graphml</code></a> : Adds GraphML import and export functionality to Cytoscape.js.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-undo-redo"><code>undo-redo</code></a> : Adds undo-redo APIs to Cytoscape.js.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-view-utilities"><code>view-utilities</code></a> : Adds search and highlight APIs to Cytoscape.js.</li>
</ul>
<h2 id="extensions/utility-packages">Utility packages <a href="#extensions/utility-packages"><span class="fa fa-bookmark"></span></a></h2>
<ul>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/cytoscape/cytosnap"><code>cytosnap</code></a> : A Node.js package that renders images of Cytoscape.js graphs on the server using Puppeteer.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/calvinvette/ngx-cytoscape"><code>ngx-cytoscape</code></a> : An Angular 5+ component for Cytoscape.js.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/plotly/react-cytoscapejs"><code>react-cytoscapejs</code></a> : A <a href="https://reactjs.org">React</a> component for Cytoscape.js network visualisations.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://github.com/jmvillaveces/sif.js"><code>sif.js</code></a> : A javascript library to parse simple interaction file (SIF) files.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/PathwayCommons/cytoscape-sbgn-stylesheet"><code>sbgn-stylesheet</code></a> : A stylesheet preset for <a href="https://sbgn.github.io/sbgn/">SBGN</a>.</li>
<li><i class="fa fa-fw fa-user"></i> <a href="https://github.com/PathwayCommons/sbgnml-to-cytoscape"><code>sbgnml-to-cytoscape</code></a> : Converts XML-based <a href="https://sbgn.github.io/sbgn/">SBGN</a> files to Cytoscape.js JSON.</li>
<li><i class="fa fa-fw fa-users"></i> <a href="https://www.npmjs.com/package/vue-cytoscape"><code>vue-cytoscape</code></a> : A <a href="https://vuejs.org">Vue</a> component for Cytoscape.js.</li>
</ul>
<h2 id="extensions/registration">Registration <a href="#extensions/registration"><span class="fa fa-bookmark"></span></a></h2>
<p>To register an extension, make the following call: <code>cytoscape( type, name, extension );</code></p>
<p>The value of <code>type</code> can take on the following values:</p>
<ul>
<li><code>&#39;core&#39;</code> : The extension adds a core function.</li>
<li><code>&#39;collection&#39;</code> : The extension adds a collection function.</li>
<li><code>&#39;layout&#39;</code> : The extension registers a layout prototype.</li>
<li><code>&#39;renderer&#39;</code> : The extension registers a renderer prototype.</li>
</ul>
<p>The <code>name</code> argument indicates the name of the extension.  For example, <code>cytoscape( &#39;collection&#39;, &#39;fooBar&#39;, function(){ return &#39;baz&#39;; } )</code> registers <code>eles.fooBar()</code>.</p>
<h2 id="extensions/autoscaffolding">Autoscaffolding <a href="#extensions/autoscaffolding"><span class="fa fa-bookmark"></span></a></h2>
<p>There is <a href="https://github.com/cytoscape/slush-cytoscape-extension">a Slush project for Cytoscape.js</a> such that the full project scaffolding for a new extension is automatically generated for you.  By following the included instructions, you can easily create Cytoscape.js extensions that are well organised, easily maintained, and published.</p>



				<h1 id="performance">Performance <a href="#performance"><span class="fa fa-bookmark"></span></a></h1>

					<h2 id="performance/background">Background <a href="#performance/background"><span class="fa fa-bookmark"></span></a></h2>
<p>You may notice that performance starts to degrade on graphs with large numbers of elements.  This happens for several reasons:</p>
<ul>
<li>Performance is a function of graph size, so performance decreases as the number of elements increases.</li>
<li>The rich visual styles that Cytoscape.js supports can be expensive.  Only drawing circles and straight lines is cheap, but drawing complex graphs is less so.</li>
<li>Edges are particularly expensive to render.  Multigraphs become even more expensive with the need for bezier curve edges.</li>
<li>The performance of rendering a (bitmap) canvas is a function of the area that it needs to render.  As such, an increased pixel ratio (as in high density displays, like on the iPad) can decrease rendering performance.</li>
</ul>
<h2 id="performance/optimisations">Optimisations <a href="#performance/optimisations"><span class="fa fa-bookmark"></span></a></h2>
<p>You can get much better performance out of Cytoscape.js by tuning your options, in descending order of significance:</p>
<ul>
<li><strong>Use <code>cy.getElementById()</code></strong> : The <a href="#cy.getElementById"><code>cy.getElementById(&#39;foo&#39;)</code></a> function is the fastest way to get an element by ID.  You can use <code>cy.$id(&#39;foo&#39;)</code> to type less.  Searching by selector generally means you have to check each element in the collection, whereas getting by ID is much faster as a lookup table is used.  The single ID selector (e.g. <code>cy.$(&#39;#foo&#39;)</code>) is optimised to also use the lookup table, but it does have the added cost of parsing.</li>
<li><strong>Batch element modifications</strong> : Use <a href="#core/graph-manipulation/cy.batch"><code>cy.batch()</code></a> to modify many elements at once.</li>
<li><strong>Animations</strong> : You will get better performance without animations.  If using animations anyway:<ul>
<li><a href="#collection/style/eles.flashClass"><code>eles.flashClass()</code></a> is a cheaper alternative than a smooth animation.</li>
<li>Try to limit the number of concurrent animating elements.</li>
<li>When using transition animations in the style, make sure <code>transition-property</code> is defined only for states that you want to animate.  If you have <code>transition-property</code> defined in a default state, the animation will try to run more often than if you limit it to particular states you actually want to animate.</li>
</ul>
</li>
<li><strong>Function style property values</strong> : While convenient, function style property values can be expensive.  Thus, it may be worthwhile to use caching if possible, such as by using the lodash <a href="https://lodash.com/docs#memoize"><code>_.memoize()</code></a> function.  If your style property value is a simple passthrough or linear mapping, consider using <code>data()</code> or <code>mapData()</code> instead.</li>
<li><strong>Labels</strong> : Drawing labels is expensive.<ul>
<li>If you can go without them or show them on tap/mouseover, you’ll get better performance.</li>
<li>Consider not having labels for edges.</li>
<li>Consider setting <code>min-zoomed-font-size</code> in your style so that when labels are small — and hard to read anyway — they are not rendered.  When the labels are at least the size you set (i.e. the user zooms in), they will be visible.</li>
<li>Background and outlines increase the expense of rendering labels.</li>
</ul>
</li>
<li><strong>Simplify edge style</strong> : Drawing edges can be expensive.<ul>
<li>Set your edges <code>curve-style</code> to <code>haystack</code> in your stylesheet.  Haystack edges are straight lines, which are much less expensive to render than <code>bezier</code> edges.  This is the default edge style.</li>
<li>Use solid edges.  Dotted and dashed edges are much more expensive to draw, so you will get increased performance by not using them.</li>
<li>Edge arrows are expensive to render, so consider not using them if they do not have any semantic meaning in your graph.</li>
<li>Opaque edges with arrows are more than twice as fast as semitransparent edges with arrows.</li>
</ul>
</li>
<li><strong>Simplify node style</strong> : Certain styles for nodes can be expensive.<ul>
<li>Background images are very expensive in certain cases.  The most performant background images are non-repeating (<code>background-repeat: no-repeat</code>) and non-clipped (<code>background-clip: none</code>).  For simple node shapes like squares or circles, you can use <code>background-fit</code> for scaling and preclip your images to simulate software clipping (e.g. with <a href="https://imagemagick.org">Image Magick</a> so it’s automated).  In lieu of preclipping, you could make clever use of PNGs with transparent backgrounds.</li>
<li>Node borders can be slightly expensive, so you can experiment with removing them to see if it makes a noticeable difference for your use case.</li>
</ul>
</li>
<li><strong>Avoid compound and edge selectors</strong> : Compound selectors (e.g. <code>$node node</code>) and edge selectors (e.g. <code>$node -&gt; node</code>) can be expensive because traversals are necessary.</li>
<li><strong>Set a lower pixel ratio</strong> : Because it is more expensive to render more pixels, you can set <code>pixelRatio</code> to <code>1</code> <a href="#init-opts/pixelRatio">in the initialisation options</a> to increase performance for large graphs on high density displays.  However, this makes the rendering less crisp.</li>
<li><strong>Compound nodes</strong> : <a href="#notation/compound-nodes">Compound nodes</a> make style calculations and rendering more expensive.  If your graph does not require compound nodes, you can improve performance by not using compound parent nodes.</li>
<li><strong>Hide edges during interactivity</strong> : Set <code>hideEdgesOnViewport</code> to <code>true</code> in your <a href="#core/initialisation">initialisation options</a>.  This can make interactivity  less expensive for very large graphs by hiding edges during pan, mouse wheel zoom, pinch-to-zoom, and node drag actions.  This option makes a difference on only very, very large graphs.</li>
<li><strong>Recycle large instances</strong> : Large instances can use a lot of memory, mostly due to canvas use.  Recyling an instance will help to keep your memory usage lower than calling <code>cy.destroy()</code>, because you won’t grow the heap as much and you won’t invoke the garbage collector as much.</li>
<li><strong>Avoid many node overlays</strong> : Overlays can not be cached.  Limit the number of simultaneous nodes that have <code>overlay-opacity</code> with a non-zero value.  The default stylesheet uses the overlay style only on the active element, which can only ever be one element at a time.</li>
<li><strong>Use textured zoom &amp; pan</strong> : Set <code>textureOnViewport</code> to <code>true</code> in your <a href="#core/initialisation">initialisation options</a>.  Rather than rerendering the entire scene, this makes a texture cache of the viewport at the start of pan and zoom operations, and manipulates that instead.  Makes panning and zooming smoother for very large graphs.  This option makes a difference on only very, very large graphs.  The renderer has support for more general texture caching, and so <code>textureOnViewport</code> is only useful if you really need the absolute cheapest option.</li>
</ul>



			</div>

			<p><span class="fa fa-sign-blank"></span></p>

		</div>

		<div class="toc-search">
			<input id="toc-input" type="text" placeholder="Find sections"></input>
			<a id="toc-clear" class="plain-link"><span class="fa fa-times"></span></a>
			<a id="toc-top" href="#top" class="plain-link"><span class="fa fa-arrow-up"></span></a>
		</div>

		<div id="navigation">
			<div id="toc-sections" class="toc-sections">

					<div class="section lvl1">
						
						<a class="toclink" href="#"></a>
					</div>

					<div class="section lvl1">
						
						<a class="toclink" href="#demos">Demos</a>
					</div>

					<div class="section lvl1">
						<span class="expander">
							<span class="fa fa-caret-down expanded-icon"></span>
							<span class="fa fa-caret-right collapsed-icon"></span>
						</span>
						<a class="toclink" href="#introduction">Introduction</a>
					</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#introduction/factsheet">Factsheet</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#introduction/about">About</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#introduction/packages">Packages</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#introduction/releases">Releases</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#introduction/citation">Citation</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#introduction/funding">Funding</a>
						</div>

					<div class="section lvl1">
						<span class="expander">
							<span class="fa fa-caret-down expanded-icon"></span>
							<span class="fa fa-caret-right collapsed-icon"></span>
						</span>
						<a class="toclink" href="#notation">Notation</a>
					</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#notation/graph-model">Graph model</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#notation/architecture-amp-api">Architecture &amp; API</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#notation/functions">Functions</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#notation/object-ownership">Object ownership</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#notation/gestures">Gestures</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#notation/position">Position</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#notation/elements-json">Elements JSON</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#notation/compound-nodes">Compound nodes</a>
						</div>

					<div class="section lvl1">
						<span class="expander">
							<span class="fa fa-caret-down expanded-icon"></span>
							<span class="fa fa-caret-right collapsed-icon"></span>
						</span>
						<a class="toclink" href="#getting-started">Getting started</a>
					</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#getting-started/including-cytoscape.js">Including Cytoscape.js</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#getting-started/initialisation">Initialisation</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#getting-started/specifying-basic-options">Specifying basic options</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#getting-started/next-steps">Next steps</a>
						</div>

					<div class="section lvl1">
						<span class="expander">
							<span class="fa fa-caret-down expanded-icon"></span>
							<span class="fa fa-caret-right collapsed-icon"></span>
						</span>
						<a class="toclink" href="#core">Core</a>
					</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#core/initialisation">Initialisation</a>
						</div>

						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#core/graph-manipulation">Graph manipulation</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#cy.add">cy.add() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.remove">cy.remove() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.collection">cy.collection() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.getElementById">cy.getElementById() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.$">cy.$() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.batch">cy.batch() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.mount">cy.mount() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.unmount">cy.unmount() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.destroy">cy.destroy() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.destroyed">cy.destroyed() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#core/data">Data</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#cy.data">cy.data() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.removeData">cy.removeData() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.scratch">cy.scratch() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.removeScratch">cy.removeScratch() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#core/events">Events</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#cy.on">cy.on() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.promiseOn">cy.promiseOn() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.one">cy.one() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.removeListener">cy.removeListener() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.removeAllListeners">cy.removeAllListeners() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.emit">cy.emit() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.ready">cy.ready() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#core/viewport-manipulation">Viewport manipulation</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#cy.container">cy.container() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.center">cy.center() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.fit">cy.fit() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.reset">cy.reset() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.pan">cy.pan() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.panBy">cy.panBy() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.panningEnabled">cy.panningEnabled() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.userPanningEnabled">cy.userPanningEnabled() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.zoom">cy.zoom() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.zoomingEnabled">cy.zoomingEnabled() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.userZoomingEnabled">cy.userZoomingEnabled() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.minZoom">cy.minZoom() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.maxZoom">cy.maxZoom() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.viewport">cy.viewport() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.boxSelectionEnabled">cy.boxSelectionEnabled() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.selectionType">cy.selectionType() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.width">cy.width() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.height">cy.height() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.extent">cy.extent() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.autolock">cy.autolock() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.autoungrabify">cy.autoungrabify() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.autounselectify">cy.autounselectify() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.resize">cy.resize() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#core/animation">Animation</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#cy.animated">cy.animated() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.animate">cy.animate() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.animation">cy.animation() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.delay">cy.delay() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.delayAnimation">cy.delayAnimation() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.stop">cy.stop() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.clearQueue">cy.clearQueue() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#core/layout">Layout</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#cy.layout">cy.layout() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#core/style">Style</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#cy.style">cy.style() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#core/export">Export</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#cy.png">cy.png() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.jpg">cy.jpg() </a></div>
							<div class="section lvl3"><a class="toclink" href="#cy.json">cy.json() </a></div>
					<div class="section lvl1">
						<span class="expander">
							<span class="fa fa-caret-down expanded-icon"></span>
							<span class="fa fa-caret-right collapsed-icon"></span>
						</span>
						<a class="toclink" href="#collection">Collection</a>
					</div>

						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/graph-manipulation">Graph manipulation</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#ele.cy">ele.cy() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.remove">eles.remove() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.removed">ele.removed() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.inside">ele.inside() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.restore">eles.restore() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.clone">eles.clone() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.move">eles.move() et al</a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/events">Events</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#eles.on">eles.on() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.promiseOn">eles.promiseOn() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.one">eles.one() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.once">eles.once() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.removeListener">eles.removeListener() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.removeAllListeners">eles.removeAllListeners() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.emit">eles.emit() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/data">Data</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#eles.data">eles.data() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.removeData">eles.removeData() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.scratch">ele.scratch() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.removeScratch">ele.removeScratch() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.id">ele.id() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.json">ele.json() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.jsons">eles.jsons() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.group">ele.group() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.isNode">ele.isNode() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.isEdge">ele.isEdge() </a></div>
							<div class="section lvl3"><a class="toclink" href="#edge.isLoop">edge.isLoop() </a></div>
							<div class="section lvl3"><a class="toclink" href="#edge.isSimple">edge.isSimple() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/metadata">Metadata</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#node.degree">node.degree() et al</a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/position--dimensions">Position & dimensions</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#node.position">node.position() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.shift">nodes.shift() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.positions">nodes.positions() </a></div>
							<div class="section lvl3"><a class="toclink" href="#node.renderedPosition">node.renderedPosition() </a></div>
							<div class="section lvl3"><a class="toclink" href="#node.relativePosition">node.relativePosition() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.width">ele.width() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.height">ele.height() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.boundingBox">eles.boundingBox() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.renderedBoundingBox">eles.renderedBoundingBox() </a></div>
							<div class="section lvl3"><a class="toclink" href="#node.grabbed">node.grabbed() </a></div>
							<div class="section lvl3"><a class="toclink" href="#node.grabbable">node.grabbable() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.grabify">nodes.grabify() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.ungrabify">nodes.ungrabify() </a></div>
							<div class="section lvl3"><a class="toclink" href="#node.locked">node.locked() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.lock">nodes.lock() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.unlock">nodes.unlock() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.active">ele.active() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.pannable">ele.pannable() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.panify">eles.panify() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.unpanify">eles.unpanify() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/edge-points">Edge points</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#edge.controlPoints">edge.controlPoints() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#edge.segmentPoints">edge.segmentPoints() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#edge.sourceEndpoint">edge.sourceEndpoint() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#edge.targetEndpoint">edge.targetEndpoint() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#edge.midpoint">edge.midpoint() et al</a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/layout">Layout</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#eles.layout">eles.layout() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.layoutPositions">nodes.layoutPositions() </a></div>
							<div class="section lvl3"><a class="toclink" href="#node.layoutDimensions">node.layoutDimensions() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/selection">Selection</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#ele.selected">ele.selected() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.select">eles.select() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.unselect">eles.unselect() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.selectable">ele.selectable() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.selectify">eles.selectify() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.unselectify">eles.unselectify() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/style">Style</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#eles.addClass">eles.addClass() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.removeClass">eles.removeClass() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.toggleClass">eles.toggleClass() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.classes">eles.classes() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.flashClass">eles.flashClass() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.hasClass">ele.hasClass() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.style">eles.style() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.numericStyle">ele.numericStyle() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.numericStyleUnits">ele.numericStyleUnits() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.visible">ele.visible() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.effectiveOpacity">ele.effectiveOpacity() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.transparent">ele.transparent() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/animation">Animation</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#ele.animated">ele.animated() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.animate">eles.animate() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.animation">ele.animation() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.delay">eles.delay() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ele.delayAnimation">ele.delayAnimation() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.stop">eles.stop() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.clearQueue">eles.clearQueue() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/comparison">Comparison</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#eles.same">eles.same() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.anySame">eles.anySame() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.contains">eles.contains() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.allAreNeighbors">eles.allAreNeighbors() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.is">eles.is() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.allAre">eles.allAre() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.some">eles.some() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.every">eles.every() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/iteration">Iteration</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#eles.size">eles.size() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.empty">eles.empty() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.forEach">eles.forEach() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.eq">eles.eq() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.slice">eles.slice() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.toArray">eles.toArray() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/building--filtering">Building & filtering</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#eles.getElementById">eles.getElementById() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.union">eles.union() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.difference">eles.difference() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.absoluteComplement">eles.absoluteComplement() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.intersection">eles.intersection() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.symmetricDifference">eles.symmetricDifference() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.diff">eles.diff() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.merge">eles.merge() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.unmerge">eles.unmerge() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.filter">eles.filter() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.sort">eles.sort() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.map">eles.map() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.reduce">eles.reduce() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.min">eles.min() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.max">eles.max() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/traversing">Traversing</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#eles.neighborhood">eles.neighborhood() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.components">eles.components() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.edgesWith">nodes.edgesWith() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.edgesTo">nodes.edgesTo() </a></div>
							<div class="section lvl3"><a class="toclink" href="#edges.connectedNodes">edges.connectedNodes() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.connectedEdges">nodes.connectedEdges() </a></div>
							<div class="section lvl3"><a class="toclink" href="#edge.source">edge.source() </a></div>
							<div class="section lvl3"><a class="toclink" href="#edges.sources">edges.sources() </a></div>
							<div class="section lvl3"><a class="toclink" href="#edge.target">edge.target() </a></div>
							<div class="section lvl3"><a class="toclink" href="#edges.targets">edges.targets() </a></div>
							<div class="section lvl3"><a class="toclink" href="#edges.parallelEdges">edges.parallelEdges() </a></div>
							<div class="section lvl3"><a class="toclink" href="#edges.codirectedEdges">edges.codirectedEdges() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.roots">nodes.roots() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.leaves">nodes.leaves() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.outgoers">nodes.outgoers() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.successors">nodes.successors() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.incomers">nodes.incomers() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.predecessors">nodes.predecessors() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/search">Search</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#eles.breadthFirstSearch">eles.breadthFirstSearch() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.depthFirstSearch">eles.depthFirstSearch() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.dijkstra">eles.dijkstra() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.aStar">eles.aStar() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.floydWarshall">eles.floydWarshall() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.bellmanFord">eles.bellmanFord() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.hierholzer">eles.hierholzer() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/spanning">Spanning</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#eles.kruskal">eles.kruskal() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/cut">Cut</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#eles.kargerStein">eles.kargerStein() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.hopcroftTarjanBiconnected">eles.hopcroftTarjanBiconnected() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.tarjanStronglyConnected">eles.tarjanStronglyConnected() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/centrality">Centrality</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#eles.degreeCentrality">eles.degreeCentrality() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.degreeCentralityNormalized">eles.degreeCentralityNormalized() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.closenessCentrality">eles.closenessCentrality() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.closenessCentralityNormalized">eles.closenessCentralityNormalized() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.betweennessCentrality">eles.betweennessCentrality() </a></div>
							<div class="section lvl3"><a class="toclink" href="#eles.pageRank">eles.pageRank() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/clustering">Clustering</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#eles.markovClustering">eles.markovClustering() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.kMeans">nodes.kMeans() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.kMedoids">nodes.kMedoids() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.fuzzyCMeans">nodes.fuzzyCMeans() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.hierarchicalClustering">nodes.hierarchicalClustering() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.affinityPropagation">nodes.affinityPropagation() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#collection/compound-nodes">Compound nodes</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#node.isParent">node.isParent() </a></div>
							<div class="section lvl3"><a class="toclink" href="#node.isChildless">node.isChildless() </a></div>
							<div class="section lvl3"><a class="toclink" href="#node.isChild">node.isChild() </a></div>
							<div class="section lvl3"><a class="toclink" href="#node.isOrphan">node.isOrphan() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.parent">nodes.parent() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.ancestors">nodes.ancestors() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.commonAncestors">nodes.commonAncestors() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.orphans">nodes.orphans() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.nonorphans">nodes.nonorphans() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.children">nodes.children() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.descendants">nodes.descendants() </a></div>
							<div class="section lvl3"><a class="toclink" href="#nodes.siblings">nodes.siblings() </a></div>
					<div class="section lvl1">
						<span class="expander">
							<span class="fa fa-caret-down expanded-icon"></span>
							<span class="fa fa-caret-right collapsed-icon"></span>
						</span>
						<a class="toclink" href="#selectors">Selectors</a>
					</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#selectors/notes-amp-caveats">Notes &amp; caveats</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#selectors/group-class-amp-id">Group, class, &amp; ID</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#selectors/data">Data</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#selectors/compound-nodes">Compound nodes</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#selectors/state">State</a>
						</div>

					<div class="section lvl1">
						<span class="expander">
							<span class="fa fa-caret-down expanded-icon"></span>
							<span class="fa fa-caret-right collapsed-icon"></span>
						</span>
						<a class="toclink" href="#style">Style</a>
					</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/format">Format</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/property-types">Property types</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/mappers">Mappers</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/node-body">Node body</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/background-image">Background image</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/pie-chart-background">Pie chart background</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/edge-line">Edge line</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/gradient">Gradient</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/bezier-edges">Bezier edges</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/loop-edges">Loop edges</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/unbundled-bezier-edges">Unbundled bezier edges</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/haystack-edges">Haystack edges</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/segments-edges">Segments edges</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/straight-edges">Straight edges</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/taxi-edges">Taxi edges</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/edge-arrow">Edge arrow</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/edge-endpoints">Edge endpoints</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/visibility">Visibility</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/labels">Labels</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/events">Events</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/overlay">Overlay</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/ghost">Ghost</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/transition-animation">Transition animation</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#style/core">Core</a>
						</div>

					<div class="section lvl1">
						<span class="expander">
							<span class="fa fa-caret-down expanded-icon"></span>
							<span class="fa fa-caret-right collapsed-icon"></span>
						</span>
						<a class="toclink" href="#events">Events</a>
					</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#events/event-object">Event object</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#events/event-bubbling">Event bubbling</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#events/user-input-device-events">User input device events</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#events/collection-events">Collection events</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#events/graph-events">Graph events</a>
						</div>

					<div class="section lvl1">
						<span class="expander">
							<span class="fa fa-caret-down expanded-icon"></span>
							<span class="fa fa-caret-right collapsed-icon"></span>
						</span>
						<a class="toclink" href="#layouts">Layouts</a>
					</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#layouts/null">null</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#layouts/random">random</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#layouts/preset">preset</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#layouts/grid">grid</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#layouts/circle">circle</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#layouts/concentric">concentric</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#layouts/breadthfirst">breadthfirst</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#layouts/cose">cose</a>
						</div>

						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#layouts/layout-manipulation">Layout manipulation</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#layout.run">layout.run() </a></div>
							<div class="section lvl3"><a class="toclink" href="#layout.stop">layout.stop() </a></div>
						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#layouts/layout-events">Layout events</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#layout.on">layout.on() </a></div>
							<div class="section lvl3"><a class="toclink" href="#layout.promiseOn">layout.promiseOn() </a></div>
							<div class="section lvl3"><a class="toclink" href="#layout.one">layout.one() </a></div>
							<div class="section lvl3"><a class="toclink" href="#layout.removeListener">layout.removeListener() </a></div>
							<div class="section lvl3"><a class="toclink" href="#layout.removeAllListeners">layout.removeAllListeners() </a></div>
							<div class="section lvl3"><a class="toclink" href="#layout.emit">layout.emit() </a></div>
					<div class="section lvl1">
						<span class="expander">
							<span class="fa fa-caret-down expanded-icon"></span>
							<span class="fa fa-caret-right collapsed-icon"></span>
						</span>
						<a class="toclink" href="#animations">Animations</a>
					</div>

						<div class="section lvl2">
							<span class="expander">
								<span class="fa fa-caret-down expanded-icon"></span>
								<span class="fa fa-caret-right collapsed-icon"></span>
							</span>
							<a class="toclink" href="#animations/animation-manipulation">Animation manipulation</a>
						</div>

							<div class="section lvl3"><a class="toclink" href="#ani.play">ani.play() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ani.playing">ani.playing() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ani.progress">ani.progress() et al</a></div>
							<div class="section lvl3"><a class="toclink" href="#ani.pause">ani.pause() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ani.stop">ani.stop() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ani.completed">ani.completed() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ani.apply">ani.apply() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ani.applying">ani.applying() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ani.reverse">ani.reverse() </a></div>
							<div class="section lvl3"><a class="toclink" href="#ani.promise">ani.promise() </a></div>
					<div class="section lvl1">
						<span class="expander">
							<span class="fa fa-caret-down expanded-icon"></span>
							<span class="fa fa-caret-right collapsed-icon"></span>
						</span>
						<a class="toclink" href="#extensions">Extensions</a>
					</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#extensions/ui-extensions">UI extensions</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#extensions/layout-extensions">Layout extensions</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#extensions/api-extensions">API extensions</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#extensions/utility-packages">Utility packages</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#extensions/registration">Registration</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#extensions/autoscaffolding">Autoscaffolding</a>
						</div>

					<div class="section lvl1">
						<span class="expander">
							<span class="fa fa-caret-down expanded-icon"></span>
							<span class="fa fa-caret-right collapsed-icon"></span>
						</span>
						<a class="toclink" href="#performance">Performance</a>
					</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#performance/background">Background</a>
						</div>

						<div class="section lvl2">
							
							<a class="toclink" href="#performance/optimisations">Optimisations</a>
						</div>


			</div>

			<p><span class="fa fa-sign-blank"></span></p>
		</div>


		<div id="orphaned-cy-container">
			<div id="cy-etc" class="hidden">
				<div id="cy-arrow">
					<span class="fa fa-arrow-down"></span>
				</div>
				<div id="cy-title"><pre class="content"></pre></div>
				<div id="cy-label" class="hidden"><code>window.cy</code></div>
				<div id="cy" class="hidden"></div>
				<div id="cy-refresh" class="hidden">
					<span class="link plain-link fa fa-refresh"></span>
				</div>
				<div id="cy-show">
					<span class="link plain-link fa fa-plus"></span>
				</div>
				<div id="cy-hide" class="hidden">
					<span class="link plain-link fa fa-minus"></span>
				</div>
			</div>
		</div>

		<script src="js/cytoscape.min.js"></script>

		<!-- polyfills so the docs work on old browsers, like IE -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script>

		<!-- the docs js -->
		<script src="js/script.js"></script>

		<script type="text/javascript">

		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-155159-11']);
		_gaq.push(['_trackPageview']);

		(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();

		</script>

	</body>
</html>
